* {
    margin: 0 auto;
    padding: 0; 
    box-sizing: border-box;
}

body {
 
    font-family: 'Nanum Gothic', sans-serif;
}


a {
    text-decoration: none;
    color: black;
}

ul {
    list-style-type: none;
}

#container{
  
    width: 1440px;
    height: 2075px;
    box-sizing: border-box;
}


#main-header > h1 > a {
    box-sizing: border-box;
}

#main-header > h1 {
    position: absolute;
    top: 26px;
    left: 20px;
}

#main-header {
    width: 1440px;
    height: 100px;
    /* background-color: #ccc; */
    position: relative;
}

#main-header > nav > ul > li{
    display: inline-block;
}

#main-header > nav > #main-menu  {
    position: absolute;
    right: 242px;
    top: 38px;
}

#main-menu > li {
    margin-right: 59px;
    font-size: 18px;
    font-weight: 800;
   
}

#main-header > nav > #utility-menu {
    position: absolute;
    right: 20px;
    top: 42px;
}

#utility-menu {
    width: 204px;
    height: 17px;
}

#utility-menu > li {
    margin-right: 13px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
}

#utility-menu > span { 
    border-radius: 10px;
    border: 1px solid #666;
    font-size: 10px; 
    background-color: none;
    margin-right: 17px;
    padding-left: 11px;
    padding: 1px 11px 1px 11px;
}

#utility-menu > a {
    position: absolute;
    top: 2px;
 
}


/* mainImage */

.mainImage {
    box-sizing: border-box;
    position: relative;
    width: 1440px;
    height: 550px;
}

.mainImage > p {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 46.89px;
    font-weight: bolder;
    color: #FFFBFB;
    position: absolute;
    top: 178px;
    left: 59px;
    letter-spacing: 2px;
    line-height: 65px;
}


/* introduction */

#introduction { 
    position: relative;
    box-sizing: border-box;
    width: 1440px;
    height: 542px;
    /* background-color: #ccc; */
}

#introduction > h1 { 
    font-family: 'Nanum Myeongjo', serif;
    font-size: 26px;
    font-weight: 900;
    padding-top: 73px;
    padding-left: 46px;
    padding-bottom: 23px;

}

#introduction > .Intro { 
    position: relative;
    left: 20px;

}

#introduction > .Intro > a { 
    display: inline-block;
    text-align: center;
    margin-right: 20px;

}

#introduction > .Intro > a:last-child {
    margin-right: 0;
}

#introduction > .Intro > a > h3 { 
    font-family:'Nanum Gothic', sans-serif;
    font-size: 22px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 10px;
    

}

#introduction > .Intro > a > p { 
    font-family:'Nanum Gothic', sans-serif;
    font-size: 18px;
}

/* notice */

#notice { 
    position: relative;
    /* background-color: #ccc; */
    width: 1440px;
    height: 398px;
    box-sizing: border-box;
}

#notice > h1 { 
    font-family: 'Nanum Myeongjo', serif;
    font-size: 26px;
    font-weight: 900;
    padding-left: 20px;
    padding-top: 50px;
}


#notice > a { 
    float: left;
    width: 480px;
    height: 245px;
    text-align: center;
    padding-top: 50px;
}

#notice > a > h3 { 
    margin-top: 41px;
    margin-bottom: 15px;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 20px;    
    font-weight: 700;
}

#notice > a > p { 
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 14px;
    color: #666;
    text-decoration: underline;

}

/* banner */

#banner { 
    margin-top: 54px;
    margin-bottom: 100px;
    width: 1440px;
    height: 163px;
    position: relative;
}


#banner > ul { 
    position: absolute;
    color: #fff;
    top: 51px;
    left: 65px;
}


#banner > ul > li:nth-child(1) { 
    font-size: 26px;
    font-family:  'Nanum Myeongjo', serif;
    font-weight: 900;
    margin-bottom: 13px;
}

#banner > ul > li:nth-child(2) { 
    font-size: 16px;
    font-family:  'Nanum Gothic', sans-serif;
    font-weight: 700;
}


#banner > .icon > a:nth-child(1) { 
    position: absolute;
    right: 138px;
    top: 58px;
}

#banner > .icon > a:nth-child(2) { 
    position: absolute;
    right: 78px;
    top: 64px;
}

/* footer */

#footer {
    width: 1440px;
    height: 168px;
    text-align: left;
    font-family:'Nanum Gothic', sans-serif;
    font-size: 14px;
    padding-top: 40px;
    padding-left: 23px;
    border-top: 1px solid #aaa;
   
}

#footer span { 
    color: #000;
}

#footer p { 
    color: #666;
    margin-top: 20px;
    margin-bottom: 20px;
}

#footer span:nth-child(1) { 
    font-weight: bold;
}


/* popup */



#container > .popup { 
    position: absolute;
    box-sizing: border-box;
    border: 1px solid #666 ;
    width: 450px;
    height: 420px;
    text-align: center; 
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #fff;
    top: 180px;
    right: 550px;

}

.popup h1 { 
    height: 49px;
    background: #0C2D83;
    font-size: 20px;
    color: #fff;
    padding-top: 10px;
    font-weight: bold;
}

.popup h3{
    margin-top: 76px;
    margin-bottom: 40px;
    font-size: 20px;
    font-weight: bold;
}

.popup > div p:nth-child(1)  { 
    font-size: 20px;
}

.popup > div p:nth-child(2) {
    margin-top: 2em; 
   font-size: 18px;
   line-height: 1.5em;
}
.popup a {
    position: absolute;    
    font-size: 16px;  
    right: 25px;
    bottom: 25px;
}