@charset "utf-8";  

/* Body */
body.navOpen { overflow:hidden }



/* Header */
#header , #logo_title , #logo_title b , #logo_title span , 
#logo_txt , #logo_vol , #logo_date , #btn_navOpen span { transition:0.3s all }

#header , .header__container { width:100% ; min-height:6rem }
#header::after { 
    display:block ; content:"" ; width:100% ; height:1px ; 
    background-color:rgba(0,0,0,0) ;  
    position:absolute ; left:0 ; bottom:0 ;
} 

#header { position:fixed ; left:0 ; top:0 ; z-index:95 } 
.header__container { margin:auto ; position:relative }

#logo { 
    display:block ; width:20rem ; height:5rem ; 
    position:absolute ; left:1rem ; top:50% ; transform:translateY(-50%) ;
    font-size:0 ;
}
#logo_title , #logo_vol , #logo_date { text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
#logo_title {
    font-family:'GamtanRoad Dotum',sans-serif ; color:#ffffff ; 
    font-size:3rem ; line-height:100% ; font-weight:100 ; 
    letter-spacing:-0.2rem ; margin-bottom:0.1rem ;
} 
#logo_title b , #logo_title span , #logo_txt , #logo_vol , #logo_date { display:inline-block }
#logo_title b , #logo_title span { 
    font-family:inherit ; line-height:inherit ; color:inherit ;
    text-shadow:inherit ; font-weight:inherit ; letter-spacing:inherit
}
#logo_title b    { font-weight:800 ; letter-spacing:-0.1rem }
#logo_title span { 
    transform:scaleX(40%) ; margin:0 ; letter-spacing:-0.6rem ;
    position:relative ; left:-0.1rem 
}
#logo_txt , #logo_vol { margin-right:0.4rem }
#logo_txt {
    font-size:1.2rem ; line-height:90% ; padding:0.2rem 0.3rem 0.3rem ;
    color:#ffffff ; letter-spacing:-0.05rem ;
    background-color:#f1592a ; border-radius:0.2rem ;
}
#logo_vol , #logo_date {
    font-size:1.4rem ; line-height:100% ; 
    color:#ffffff ; font-weight:500 ;
}
#logo_date { font-weight:300 } 
#logo_link {
    display:block ; width:100% ; overflow:hidden ; height:100% ; 
    position:absolute ; left:0 ; top:0 ;
    font-size:0 ; color:transparent 
}
#btn_download { display:none }


#btn_navOpen { 
    display:block ; width:5rem ; height:5rem ;
    position:absolute ; right:0.5rem ; top:50% ; transform:translateY(-50%) ; 
    font-size:0 ; color:transparent ; 
}
#btn_navOpen span {
    display:block ; width:3.8rem ; height:0.2rem ; border-radius:1rem ;
    background-color:#ffffff ; position:absolute ; left:50% ; transform:translate(-50%,-50%) ; 
}
#btn_navOpen span:nth-last-of-type(1) , #btn_navOpen:hover span:nth-last-of-type(3) { top:30% } 
#btn_navOpen span:nth-last-of-type(2) { top:50% } 
#btn_navOpen span:nth-last-of-type(3) , #btn_navOpen:hover span:nth-last-of-type(1) { top:70% } 
#btn_navOpen:hover span:nth-last-of-type(2) { transform:translate(-50%,-50%) rotate(180deg) }

.sticky #header { background-color:#ffffff ; box-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
.sticky #header::after { background-color:rgba(0,0,0,0.0) }
.sticky #logo_title , .sticky #logo_vol , .sticky #logo_date { text-shadow:none }
.sticky #logo_title , .navOpen #logo_title { color:#f1592a }
.sticky #logo_vol , .sticky #logo_date { color:#595959 }
.sticky #logo_txt { background-color:#595959 }
.sticky #btn_navOpen span { background-color:#1d2f6f }
.sticky #logo_txt { color:#ffffff } 

.navOpen #header { background-color:#222222 ; box-shadow:none }
.navOpen #header::after { background-color:rgba(255,255,255,0.1) }
.navOpen #logo_vol , .navOpen #logo_date { color:#ffffff }
.navOpen #logo_txt , .navOpen #btn_navOpen span { background-color:#ffffff }
.navOpen #logo_txt  { color:#595959 } 
.navOpen #btn_navOpen span:nth-last-of-type(1) , .navOpen #btn_navOpen span:nth-last-of-type(3) { top:50% }
.navOpen #btn_navOpen span:nth-last-of-type(1) { transform:translate(-50%,-50%) rotate(45deg) }
.navOpen #btn_navOpen span:nth-last-of-type(2) { opacity:0 } 
.navOpen #btn_navOpen span:nth-last-of-type(3) { transform:translate(-50%,-50%) rotate(-45deg) } 
.navOpen #btn_navOpen:hover span { width:3rem }
.navOpen #btn_navOpen:hover span:nth-last-of-type(1) { transform:translate(-50%,-50%) rotate(135deg) }
.navOpen #btn_navOpen:hover span:nth-last-of-type(3) { transform:translate(-50%,-50%) rotate(45deg) } 



/* Navigation */ 
#nav { 
    display:block ; width:100% ; height:100vh ; padding-top:6rem ; 
    position:fixed ; left:-101% ; top:0 ; z-index:93 ; 
    background-color:#222222; transition:0.3s all ;
} 
#nav_img , #nav_container { display:none }
#nav_container { width:100% ; height:100% ; overflow:auto }
.nav__link {
    display:block ; padding:1.7rem 5% ;
    font-size:0 ; text-align:left ;
    border-bottom:solid 1px rgba(255,255,255,0.15) ;
    position:relative ;
}
.nav__link > span , .nav__link > b , .nav__link > strong { text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; word-break:keep-all }
.nav__link.home , .nav__link > span , .nav__link > b     { font-weight:600 }
.nav__link > span , .nav__link > b { display:inline-block ; font-size:1.4rem ; line-height:120% }
.nav__link > strong { display:block }
.nav__link > b , .nav__link > strong { color:#ffffff } 
.nav__link > b { opacity:0.7 }
.nav__link > span   { margin-right:0.5rem }
.nav__link > strong { padding-top:0.5rem }
.nav__link.home { padding-top:2rem ; padding-bottom:2rem }
.nav__link.home , .nav__link > span    { color:#f1592a }
.nav__link.home ,  .nav__link > strong { font-size:1.8rem ; line-height:140% }
.nav__link , .nav__link::after , .nav__link > b { transition:0.3s all }
.nav__link::after {
    display:block ; content:"" ; width:0 ; height:1px ;
    background-color:#f1592a ;
    position:absolute ; left:0 ; bottom:-1px ;
}
.nav__link:hover::after , .nav__link.now::after { width:100% }
.nav__link:hover > b { opacity:1 }
.nav__link:hover , .nav__link.now:hover { background-color:rgba(0,0,0,0.2) }
 
#nav_list , .nav__btns , #nav_bottom    { margin-bottom:3rem }
#nav_bottom , .nav__btns  { font-size:0 ; text-align:center }
.nav__btn , .nav__btns li { margin:0.3rem 0.5rem  }
.nav__btn , .nav__btns li , .nav__btns { display:inline-block }
.nav__btn  { position:relative }
.nav__btn , .nav__btns a , .btn__close ,.btn__close::before , .btn__close::after { transition:0.3s all }
.nav__btn , .nav__btns a  {  
    padding:1rem 2rem ; border:solid 1px rgba(255,255,255,0.15) ; box-sizing:border-box ; border-radius:0.4rem ;
    font-size:1.4rem ; line-height:100% ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) 
}
.nav__btns a { display:block } 
.nav__btn:hover , .nav__btns a:hover { background-color:#111111 ; border-color:#111111 } 

.btn__close {
    display:block ; overflow:hidden ; width:2rem ; height:2rem ; 
    margin:auto ; font-size:0 ; color:transparent ;
    position:relative ; opacity:0.4 ;
}
.btn__close::before , .btn__close::after { 
    display:block ; content:"" ; width:1.8rem ; height:1px ;
    background-color:#ffffff ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.btn__close:hover::before , .btn__close:hover::after  { width:2rem }
.btn__close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.btn__close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }
.btn__close:hover { opacity:1 }

.navOpen #nav { left:0 }
.navOpen #nav_container { display:block }



/* Footer */
#footer { 
    display:block ; overflow:hidden ; width:100% ; padding:3rem ;
    position:relative ; background-color:#ffffff 
} 
#footer::before {
    display:block ; content:"" ; width:100% ; height:1px ; 
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; top:0
}
.footer__container { width:100% ; text-align:center }
.footer__logo , .footer__list { margin:0 auto 2rem }
.footer__logo { font-size:0 ; color:transparent }
.footer__logo {
    display:block ; width:14rem ; height:5rem ; 
    background:url(../img/dgu_logo.png) no-repeat center ; background-size:cover ;
} 
.footer__list { text-align:center ; font-size:0 ; display:inline-block  }
.footer__list li { display:inline-block ; margin:0.2rem 0.3rem }
.footer__list a , .footer__list a::after { border-radius:0.4rem ; transition:0.3s all } 
.footer__list a , .footer__txt { padding:0.7rem 1.5rem 0.9rem ; font-size:1.4rem }
.footer__list a  { 
    position:relative ; line-height:100% ; 
    display:block ; padding:0.7rem 1.5rem 0.9rem  
}
.footer__list a::after {
    display:block ; content:"" ; width:100% ; height:100% ;
    border:solid 1px rgba(0,0,0,0.1) ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) 
} 
.footer__list a:hover { background-color:#111111 ; color:#ffffff }
.footer__list a:hover::after { opacity:0 }

.footer__txt { display:block }
.footer__txt > p { 
    font-size:inherit ; line-height:120% ; text-align:center ;
    word-break:keep-all ; margin-bottom:1rem ;
}
.footer__txt > p:last-child { margin-bottom:0 }

#u_logo { 
    display:inline-block ; overflow:hidden ; width:11.4rem ; height:2rem ; 
    font-size:0 ; color:transparent ; 
    background:url(../img/u_logo.jpg) no-repeat center ; background-size:cover ;
    position:relative ; top:-0.3rem
}



/* Aside */
#aside { 
    width:1px ; height:1px ; 
    position:fixed ; right:0.5rem ; bottom:0.5rem ; z-index:88 ;
} 
#btn_top , #btn_top::before , #btn_top::after { transition:0.3s all }
#btn_top {
    display:block ; overflow:hidden ; width:4rem ; height:4rem ; border-radius:100% ; 
    position:absolute ; right:-7rem ; bottom:0 ; background-color:#1d2f6f ;
    font-size:0 ; color:transparent
}
#btn_top:hover { background-color:#111111 }
#btn_top:hover , .sticky #btn_top  { right:0 }
#btn_top::before , #btn_top::after {
    display:block ; content:"" ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
#btn_top::after {
    width:0.2rem ; height:1.2rem ; border-radius:1rem ;
    background-color:#ffffff ;
}
#btn_top::before { 
    width:1rem ; height:1rem ; top:45% ;
    border:solid 0.2rem #ffffff ; border-right:0 ; border-bottom:0 ;
    transform:translate(-50%,-50%) rotate(45deg)
}
#btn_top:hover::after  { transform:translate(-50%,-50%) rotate(90deg) ; top:40% ; height:1.4rem }
#btn_top:hover::before { top:65% }





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

    /* Header */
    #header , .header__container { min-height:8rem }
    .header__container , .footer__container { width:96% ; max-width:120rem ; margin:auto }
    #logo { left:0 }
    #btn_navOpen { right:0 }

    #btn_download , #btn_download::after { border-radius:0.4rem ; transition:0.3s all }
    #btn_download {
        display:block ; width:11rem ; padding:0.7rem 0.1rem 0.9rem ;
        font-size:1.4rem ; line-height:100% ; color:#ffffff ; font-weight:400 ;
        text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; text-align:center ;
        position:absolute ; right:10rem ; top:50% ; transform:translateY(-50%) ;
    }
    #btn_download::after {
        display:block ; content:"" ; box-sizing:border-box ; width:100% ; height:100% ;
        border:solid 1px rgba(255,255,255,0.15) ;
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    } 
    #btn_download:hover { background-color:#f1592a ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) }
    #btn_download:hover::after { opacity:0 }

    .sticky #btn_download { color:#444444 ; text-shadow:none }
    .sticky #btn_download::after { border-color:rgba(0,0,0,0.1) }
    .sticky #btn_download:hover  { color:#ffffff }

    .navOpen #btn_download { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
    .navOpen #btn_download::after { border-color:rgba(255,255,255,0.15) }
    .navOpen #btn_download:hover  { color:#ffffff }
 

    
    /* Navigation */
    #nav { padding-top:8rem }
    #nav::after , #nav_bottom::after , .nav__btns::after  { display:block ; content:"" ; clear:both }
    #nav_img , #nav_container { width:50% ; height:100% ; float:left }
    .navOpen #nav_img , .navOpen #nav_container { display:block } 
    #nav_img { padding:3rem 5rem }
    #nav_img::before { 
        display:block ; content:"" ; width:100% ; height:100% ; border-radius:0.4rem ;
        background:url(../img_sub/visual_0.jpg) no-repeat center ; background-size:cover } 

    #nav_list , #nav_bottom { width:96% ; max-width:60rem }
    #nav_list  { padding-top:3rem ; margin-bottom:7rem }
    .nav__link { padding:2rem 0.5rem }
    .nav__link.home ,  .nav__link > strong { font-size:2.2rem }

    .nav__btn , .nav__btns , .nav__btns li { margin:0 ; float:left ; display:block }
    .nav__btn { margin-right:1rem ; padding:1.2rem 2rem }

    .nav__btn.pdf { display:none }
    #nav_bottom , #nav_bottom li , .nav__btns a  { position:relative }
    .nav__btns a  { border-radius:0 ; padding:1.3rem 2rem ; border:0 }
    .nav__btns a::after {
        display:block ; content:"" ; width:100% ; height:100% ; 
        box-sizing:border-box ; border:solid 1px rgba(255,255,255,0.15) ; border-left:none ; border-right:none ;
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ; 
    }

    .nav__btns li:first-child a , .nav__btns li:first-child a::after { border-radius:0.4rem 0 0 0.4rem }
    .nav__btns li:last-child a , .nav__btns li:last-child a::after   { border-radius:0 0.4rem 0.4rem 0 }
    .nav__btns li:first-child a::after { border-left:solid 1px rgba(255,255,255,0.15) }
    .nav__btns li:last-child a::after  { border-right:solid 1px rgba(255,255,255,0.15) }
    .nav__btns li::after {
        display:block ; content:"" ; width:1px ; height:1.4rem ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
        background-color:#ffffff ; opacity:0.1 ;
    }
    .nav__btns li:last-child::after { display:none }
    .nav__btns a:hover::after { opacity:0 } 
    #btn_navClose {
        margin:0 ; 
        position:absolute ; right:0.5rem ; top:50% ; transform:translateY(-50%) ;
    } 



    /* Footer */
    #footer { padding:0 }
    .footer__container { padding:3.6rem 20rem 3.7rem 20rem ; position:relative }
    .footer__txt { padding:0 ; text-align:left ; display:block ; width:100% }  
    .footer__txt::after { display:block ; content:"" ; clear:both } 
    .footer__txt > p { margin:0 ; width:49% ; float:left ; text-align:left }
    .footer__txt > p:last-child { float:right  }
    .footer__logo , .footer__list , .footer__list li { margin:0 ; padding:0 }
    .footer__list li { display:inline-block ; margin-left:0.5rem }
    .footer__logo , .footer__list { display:block ; position:absolute ; top:50% ; transform:translateY(-50%) }
    .footer__logo { left:0 }
    .footer__list { right:0 ; text-align:right ; width:20rem }
    .footer__list li.pdf { display:none }



    /* Aside */
    #btn_top { width:5rem ; height:5rem ; bottom:1.5rem }
 
} 
    




@media print { }