@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,800&display=swap&subset=korean');

/* #d3c89c #022601 */

*{ margin: 0; padding: 0; font-family: 'NanumSquare', 'Nanum Gothic', sans-serif; box-sizing: border-box; color: #222; }
li{ list-style: none; }
a{ text-decoration: none; }
img{ border: none; }



@media screen and (min-width: 1025px){
    html{ font-size: 16px; }
    
    /* header */
    header{ width: 100%; height: 4.5rem;  }
    .hWrap{ display: table; width: 90%; min-width: 1025px; height: 100%; margin: 0 auto; }

    #menu{ display: table-cell; width: 5%; height: 100%; vertical-align: middle; }
    #menu img{ width: 2.2rem; }

    #title{ position: relative; display: table-cell; width: 30%; height: 100%;  }
    #thisP{ display: block; width: 50%; height: 100%; color: #d3c89c; font-size: 1.4rem; line-height: 4.5rem; font-weight: 600; }
    #title > ul{ width: 50%; height: auto; position: absolute; top: 4rem; display: none; }
    #title > ul > li{ width: 100%; height: 2rem;  }
    #title > ul > li > a{ line-height: 2rem; font-size: 1.1rem; transition-duration: .2s; }
    #title > ul > li > a.active{ color: #022601; }
    #thisP:hover + ul{ display: block; }
    #title > ul:hover{ display: block; }
    #title > ul > li:hover a{ padding-left: 1rem; color: #d3c89c; }
    #title > ul > li:hover a.active{ color: #999; padding-left: 0; }

    .hWrap > h1{ display: table-cell; width: 65%; height: 100%; vertical-align: middle; text-align: right; }
    .hWrap > h1 img{ width: 30%; max-width: 250px;  }

    
    
    /* popup */
    #popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100vh; display: none; background-color: rgba(0,0,0,0.8); z-index: 50; }
    #popup.on{ display: block; }/* js */
    #popup .contents{ width: 30vw; min-width: 30vw; height: auto; min-height: 100vh; background-color: #fff; padding-top: 8vh; }
    #popup .menu_top{ display: table; width: 90%; height: 8rem;  margin: auto; margin-bottom: 10vh; }
    #popup .menu_top h1{ display: table-cell; width: 80%; vertical-align: middle; }
    #popup .menu_top h1 img{ width: 90%; vertical-align: middle; margin-left: 5%; min-width: 10rem; max-width: 14rem;  }
    #close{ display: table-cell; width: 20%; vertical-align: middle; text-align: center;  }
    #close img{ width: 30%; max-width: 1.7rem; min-width: 1.5rem; vertical-align: middle; }

    #popup .menu{ width: 80%; height: auto; padding-left: 4vw; }    
    #popup .mainMenu{ width: 100%; height: auto; }
    #popup .mainMenu:hover > a{  color: #d3c89c; }
    #popup .mainMenu:hover > a{ color: #d3c89c; width: 40%; }
    #popup .mainMenu:hover > .subMenu{ display: block; }

    #popup .mainMenu > a{ display: block; float: left; width: 100%; height: auto; min-height: 6vh; font-size: 1.5rem;  }  
    #popup .mainMenu .subMenu{ float: left; display: none; width: 60%; height: auto;  }
    #popup .subMenu > li{ position: relative; width: 100%; height: 4vh; }
    #popup .subMenu > li > a{ display: block; width: 70%; height: 100%; margin-left: 30%; text-align: center; font-size: 1rem; font-weight: 300; transition-duration: .3s; }
    #popup .subMenu > li:hover > a{ color: #d3c89c;  }


    /* container */
    #container{ width: 100%; height: auto; float: none !important; }
    #top{ width: 80%; min-width: 1025px; height: auto; min-height: 25rem; margin: 25vh auto 15vh; overflow: hidden; }
    #top h5{ font-size: 1.5rem; color: #022601; font-weight: 600;   }
    #top h3{ font-size: 2.2rem; color: #022601; font-weight: 300; margin-top: 2rem; line-height: 3.2rem; }
    #top h2{ height: 7.5rem; text-align: right; font-size: 7rem; font-weight: 800; color: #d3c89c; margin-top: 25vh; padding-top: 7.5rem; transition: ease .5s .2s;   }
    #top h2.up{ padding-top: 0;  }
    #h_p{ font-size: 6.5rem !important; }
    #fcTitle{ font-size: 4.5rem !important;  }
    #bottom{ position: relative; width: 100%; min-width: 1025px; height: auto; padding-bottom: 20vh; }
    
    /* notice */
    #bo_list{ width: 80vw !important; margin: 0 auto 20vh; }
    #bo_notice{ background-color: #fefefe !important; }
    #bo_v{ width: 80vw !important; margin: 0 auto 15vh; }
    #bo_list_total{ width: 80vw !important; margin: 0 auto; }
    #bo_sch{ width: 80vw !important; margin: 0 auto; }

    /* footer */
    footer{ width: 100%; min-width: 1025px; height: 20vh; max-height: 200px; background-color: #999;  }
    .fwrap{ display: table; width: 90%; height: 100%; margin: 0 auto; }
    .fwrap h1{ display: table-cell; width: 40%; height: 100%; vertical-align: middle; text-align: center; }
    .fwrap img{ width: 20vw; max-width: 17rem;  }
    .fwrap p{ display: table-cell; width: 60%; height: 100%; vertical-align: middle; color: #fff; line-height: 1.5rem; font-weight: 300; font-size: .9rem; text-align: center; }
    .fwrap p a{ color: #fff;  }
    
    
    
}





@media screen and (min-width: 768px) and (max-width: 1024px){  /* tablet */
    html{ font-size: 14px; }
    
    /* t-header */
    header{ width: 100%; height: 4.5rem;  }
    .hWrap{ display: table; width: 90%; min-width: 700px; height: 100%; margin: 0 auto; }

    #menu{ display: table-cell; width: 10%; height: 100%; vertical-align: middle; }
    #menu img{ width: 2.5rem; }

    #title{ position: relative; display: table-cell; width: 30%; height: 100%; }
    #thisP{ display: block; width: 70%; height: 100%; color: #d3c89c; font-size: 1.4rem; line-height: 4.5rem; font-weight: 600;  }
    #title > ul{ width: 60%; height: auto; position: absolute; top: 4rem; display: none; }
    #title > ul > li{ width: 100%; height: 2rem;  }
    #title > ul > li > a{ line-height: 2rem; font-size: 1.1rem; transition-duration: .2s; }
    #title > ul > li > a.active{ color: #022601; }
    #thisP:hover + ul{ display: block; }
    #title > ul:hover{ display: block; }
    #title > ul > li:hover a{ padding-left: 1rem; color: #d3c89c; }
    #title > ul > li:hover a.active{ color: #999; padding-left: 0; }

    .hWrap > h1{ display: table-cell; width: 60%; height: 100%; vertical-align: middle; text-align: right; }
    .hWrap > h1 img{ width: 40%; max-width: 22rem;  }

     /* t-popup */
    #popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100vh; display: none; background-color: rgba(0,0,0,0.8); z-index: 50; }
    #popup.on{ display: block; z-index: 50; }/* js */
    #popup .contents{ width: 60vw; min-width: 60vw; height: auto; min-height: 100vh; background-color: #fff; padding-top: 8vh;  }
    #popup .menu_top{ display: table; width: 90%; height: 8rem; margin: auto; margin-bottom: 10vh; }
    #popup .menu_top h1{ display: table-cell; width: 80%; vertical-align: middle; }
    #popup .menu_top h1 img{ width: 100%; vertical-align: middle; min-width: 12rem; max-width: 16rem;  }
    #close{ display: table-cell; width: 20%; vertical-align: middle; text-align: center;  }
    #close img{ width: 30%; max-width: 1.8rem; min-width: 1.4rem; vertical-align: middle;  }
    #popup .menu{ width: 80%; height: auto; margin: 0 auto; }    
    #popup .mainMenu{ width: 100%; height: auto; }
    #popup .mainMenu.on > a{ color: #d3c89c; width: 40%; }
    #popup .mainMenu.on > .subMenu{ display: block; }    
    #popup .mainMenu > a{ display: block; float: left; width: 100%; height: auto; min-height: 6vh; font-size: 1.6rem;  }  
    #popup .mainMenu .subMenu{ float: left; display: none; width: 60%; height: auto;  }
    #popup .subMenu > li{ width: 100%; height: 4vh;  }
    #popup .subMenu > li > a{ display: block; width: 70%; height: 100%; margin-left: 20%; text-align: center; font-size: 1.2rem; font-weight: 300; transition-duration: .3s; }


    /* t-container */
    #container{ width: 100%; height: auto; float: none !important;  }
    #top{ width: 80%; min-width: 700px; height: auto; min-height: 20rem; margin: 10vh auto;  overflow: hidden; }
    #top h5{ font-size: 1.5rem; color: #022601; font-weight: 600; }
    #top h3{ font-size: 2.1rem; color: #022601; font-weight: 300; margin-top: 1.5rem; line-height: 3rem;  }
    #top h2{ height: 5rem; text-align: right; font-size: 5rem; font-weight: 800; color: #d3c89c; margin-top: 10vh; padding-top: 5rem; transition: ease .5s; }
    #top h2.up{ padding-top: 0;  }
    #h_p{ font-size: 4.6rem !important; }
    #fcTitle{ font-size: 3rem !important; }
    
    #bottom{ position: relative; width: 100%; min-width: 768px; height: 100%; padding-bottom: 15vh; }
    
    #bo_list{ width: 80vw !important; margin: 0 auto 15vh; }
    #bo_v{ width: 80vw !important; margin: 0 auto 12vh; }
    
    
    /* t-footer */
    footer{ width: 100%; height: 20vh; max-height: 150px; background-color: #999; min-width: 768px; }
    .fwrap{ display: table; width: 90%; height: 100%; margin: 0 auto; }
    .fwrap h1{ display: table-cell; width: 40%; height: 100%; vertical-align: middle; text-align: center; }
    .fwrap img{ width: 20vw; max-width: 17rem;  }
    .fwrap p{ display: table-cell; width: 60%; height: 100%; vertical-align: middle; color: #fff; line-height: 1.5rem; font-weight: 300; font-size: .9rem; text-align: center; }
    .fwrap p a{ color: #fff;  }

    
}


@media screen and (max-width: 767px){ /* mobile */
    html{ font-size: 12px; }
    
    /* m-header */
    header{ width: 100%; height: 4.5rem;  }
    .hWrap{ display: table; width: 90%; min-width: 350px; height: 100%; margin: 0 auto;  }

    #menu{ display: table-cell; width: 15%; height: 100%; vertical-align: middle;  }
    #menu img{ width: 2.5rem; }

    #title{ position: relative; display: table-cell; width: 30%; height: 100%; }
    #thisP{ display: block; width: 100%; height: 100%; color: #d3c89c; font-size: 1.3rem; line-height: 4.5rem; font-weight: 600;  }
    #title > ul{ width: 100%; height: auto; position: absolute; top: 3.5rem; display: none; }
    #title > ul > li{ width: 100%; height: 1.9rem;  }
    #title > ul > li > a{ line-height: 2rem; font-size: 1.1rem; transition-duration: .2s; }
    #title > ul > li > a.active{ color: #022601; }
    #thisP:hover + ul{ display: block; }
    #title > ul:hover{ display: block; }
    #title > ul > li:hover a{ padding-left: 1rem; color: #d3c89c; }
    #title > ul > li:hover a.active{ color: #999; padding-left: 0; }

    .hWrap > h1{ display: table-cell; width: 55%; height: 100%; vertical-align: middle; text-align: right; }
    .hWrap > h1 img{ width: 70%; max-width: 22rem;  }

     /* m-popup */
    #popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100vh; display: none; background-color: rgba(0,0,0,0.8); z-index: 50; }
    #popup.on{ display: block; z-index: 50; }/* js */
    #popup .contents{ width: 80vw; min-width: 80vw; height: auto; min-height: 100vh; background-color: #fff; padding-top: 5vh;  }
    #popup .menu_top{ display: table; width: 90%; height: 5rem; margin: auto; margin-bottom: 7vh; }
    #popup .menu_top h1{ display: table-cell; width: 80%; vertical-align: middle; }
    #popup .menu_top h1 img{ width: 100%; vertical-align: middle; min-width: 10rem; max-width: 14rem;  }
    #close{ display: table-cell; width: 20%; vertical-align: middle; text-align: center;  }
    #close img{ width: 30%; max-width: 1.6rem; min-width: 1.2rem; vertical-align: middle;  }
    #popup .menu{ width: 80%; height: auto; margin: 0 auto; }    
    #popup .mainMenu{ width: 100%; height: auto; }
    #popup .mainMenu.on > a{ color: #d3c89c; width: 40%; }
    #popup .mainMenu.on > .subMenu{ display: block; }    
    #popup .mainMenu > a{ display: block; float: left; width: 100%; height: auto; min-height: 6vh; font-size: 1.6rem;  }  
    #popup .mainMenu .subMenu{ float: left; display: none; width: 60%; height: auto;  }
    #popup .subMenu > li{ width: 100%; height: 4.5vh;  }
    #popup .subMenu > li > a{ display: block; width: 70%; height: 100%; margin-left: 30%;  font-size: 1.2rem; font-weight: 300; transition-duration: .3s; }

    /* m-container */
    #container{ width: 100%; height: auto; float: none !important; }
    #top{ width: 80%; min-width: 350px; height: auto; min-height: 8rem; margin: 10vh auto 5vh; overflow: hidden; }
    #top h5{ font-size: 1rem; color: #022601; font-weight: 600; }
    #top h3{ font-size: 1.4rem; color: #022601; font-weight: 300; margin-top: 1rem; line-height: 2.1rem;  }
    #top h2{ height: 3rem; text-align: right; font-size: 3rem; font-weight: 800; color: #d3c89c; margin-top: 6vh; padding-top: 3rem; transition: ease .5s; }
    #top h2.up{ padding-top: 0;  }
    #h_p{ font-size: 2.5rem !important; }
    #fcTitle{ font-size: 1.9rem !important; }
    
    #bottom{ position: relative; width: 100%; min-width: 350px; height: 100%; padding-bottom: 15vh;  }
    
    #bo_list{ width: 90vw !important; margin: 0 auto 15vh; }
    #bo_v{ width: 90vw !important; margin: 0 auto 12vh; }
    
    
    /* m-footer */
    footer{ width: 100%; height: 20vh; min-width: 350px; max-height: 200px; background-color: #999; }
    .fwrap{ width: 90%; height: 100%; margin: 0 auto; }
    .fwrap h1{ width: 100%; height: 40%; text-align: center; padding-top: 2vh; }
    .fwrap h1 > a{ display: block; width: 40vw; height: 100%; margin: 0 auto; }
    .fwrap h1 > a img{ width: 35vw; }
    .fwrap p{ width: 100%; height: 60%; color: #fff; line-height: 1.3rem; font-weight: 300; font-size: .9rem; text-align: center; }
    .fwrap p a{ color: #fff;  }

    
}