*{margin: 0; padding: 0;}
a{text-decoration: none; color: inherit;}
body, html{width: 100%; height: 100%; font-family: 'Nanum Gothic';}
button, input{outline: none; border: none;}

body > div#wrap{width: 100%; height: 100%; margin: 0 auto; }
body > div#wrap > div#header{width: 100%; height: 60px; background: #74B9FF; position: absolute; z-index: 10; margin: 0 auto;}
body > div#wrap > div#header > div#header_wrap{width: 1200px; height: 40px; padding: 10px; margin: 0 auto; position: relative;}
body > div#wrap > div#header > div#header_wrap > div#menu{width: 90px; height: 50px; float: left; text-align: center; line-height: 50px; position: relative;}

body > div#wrap > div#header > div#header_wrap > div#search{width: calc(100% - 90px - 85px); height: 40px; float: left;}
body > div#wrap > div#header > div#header_wrap > div#search > div#title{color:white; text-align:center; vertical-align: middle; line-height: 22px;}

body > div#wrap > div#header > div#header_wrap > div#logo{width: 85px; height: 40px; float: left; line-height: 50px; text-align: center}


body > div#wrap > div#main_img{width: 100%; height: 30vh; padding-top: 60px; margin: 0 auto;}
body > div#wrap > div#main_img > div#img.e_school{height: 30vh; margin: 0 auto; background-image: url(../images/low_sch.jpg); background-size:cover; background-position: center; background-repeat: repeat-x;}
body > div#wrap > div#main_img > div#img.m_school{height: 30vh; margin: 0 auto; background-image: url(../images/middle_sch.jpg); background-size:cover; background-position: center; background-repeat: repeat-x;}
body > div#wrap > div#main_img > div#img.h_school{height: 30vh; margin: 0 auto; background-image: url(../images/high_sch.jpg); background-size:cover; background-position: center; background-repeat: repeat-x;}
body > div#wrap > div#main_img > div#img > div#text{width: 300px; height: 55%; margin: 0 auto; text-align: center; color: white; position: relative; top: 65px;}
body > div#wrap > div#main_img > div#img > div#text > h3{font-family: 'Nanum Pen Script', cursive; font-weight: 100; font-size: 50px;}
body > div#wrap > div#main_img > div#img > div#text > h2{font-family: 'Nanum Pen Script', cursive; font-weight: 100; font-size: 80px;}
body > div#wrap > div#main_img > div#img > div#text > hr{margin: 0 auto;}

body > div#wrap > div#nav{width: 100%; height: 85px; background: #f5f6fa; padding-top: 30px; position: relative;}
body > div#wrap > div#nav > div#nav_wrap{width: 1100px; height: 85px; margin: 0 auto;}
body > div#wrap > div#nav > div#nav_wrap > h1{float: left; width: 130px; height: 50px; line-height: 50px;}
body > div#wrap > div#nav > div#nav_wrap > ul#a_wrap{float: right; width: 360px; height: 30px; margin-top: 15px; list-style: none;}
body > div#wrap > div#nav > div#nav_wrap > ul#a_wrap > li{height: 30px; line-height: 30px; text-align: center; float: left; padding: 0 10px; position: relative;}
body > div#wrap > div#nav > div#nav_wrap > ul#a_wrap > li.m_Nselect{color: #BFBFBF;}
body > div#wrap > div#nav > div#nav_wrap > ul#a_wrap > li.m_Yselect{color: black;}
body > div#wrap > div#nav > div#nav_wrap > ul#a_wrap > li::after{content: ""; position: absolute; width: 1px; height: 20px; top: 50%; left: 0; transform: translate(-50%, -50%); background: #BFBFBF;}
body > div#wrap > div#nav > div#nav_wrap > ul#a_wrap > li:nth-child(1)::after{content: ""; width: 0;}
body > div#wrap > div#nav > div#nav_wrap > ul#a_wrap > li > span{display: block; font-weight: 700; cursor: pointer;}


body > div#wrap > div#contents{width: 100%; height: 500px; background: #f5f6fa; float: left;}
body > div#wrap > div#contents > .contents_wrap{width: 1080px; height: 100%; margin: 0 auto;}
body > div#wrap > div#contents > .contents_wrap > a{display: block; float: left; width: 170px; height: 70px; opacity: 1; position: relative; background-size: contain; background-repeat: no-repeat; margin: 18px 23px;}
#math{background-image: url(../images/math.png)}
#edunet{background-image: url(../images/e.png)}
#daily{background-image: url(../images/go.png)}
#ebs{background-image: url(../images/low.png)}
#donga{background-image: url(../images/dong2.png)}
#scienceall{background-image: url(../images/Science.png)}
#seoul_learn{background-image: url(../images/seoul_learn.png)}
#wedoorang{background-image: url(../images/wedoorang.png)}
#zipcok{background-image: url(../images/zipcok.png)}
#webdt{background-image: url(../images/onschool_logo.png)}
#edunet2{background-image: url(../images/edunet_logo.png)}
#elib{background-image: url(../images/electron.png)}
#seoul{background-image: url(../images/seoul.png)}
#cyber{background-image: url(../images/Cyber.png)}
#english{background-image: url(../images/EBS_Engilsh.png)}
#entry{background-image: url(../images/logo_popup.png)}
#youtube{background-image: url(../images/Korean_history.png)}
#ebs_middle{background-image: url(../images/middle.png)}
#long{background-image: url(../images/potal.png)}
#always{background-image: url(../images/Learning.png)}
#zsick{background-image: url(../images/zsick.png)}
#open{background-image: url(../images/open.png)}
#space{background-image:url(../images/spacein.png)}
#ebs_hi{background-image:url(../images/EBS_I2.png)}
#careernet{background-image:url(../images/careerNet.png)}
#korea_seoul{background-image:url(../images/korea_seoul.png)}

body > div#wrap > div#footer{width: 100%; height: 70px; background: #2d3436; float: left;}
body > div#wrap > div#footer_wrap{width: 1902px; height: 200px; margin: 0 auto;}
/*body > div#wrap > div#footer_wrap > p{width: 350px; height: 20px; position: center; color:white}*/
body > div#wrap > div#footer > div#footer_wrap > div#tail_text{font-family: 'Nanum Gothic'; color:white; text-align:center; line-height: 35px;}

/*
body > div#wrap > div#nav{width: 100%; height: 85px; background: #f5f6fa; padding-top: 30px; position: relative;}
body > div#wrap > div#nav > div#nav_wrap{width: 1100px; height: 85px; margin: 0 auto;}
body > div#wrap > div#nav > div#nav_wrap > h1{float: left; width: 130px; height: 50px; line-height: 50px;}
*/

/* nanum-gothic-regular - korean_latin */
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/nanum-gothic-v17-korean_latin-regular.eot'); /* IE9 Compat Modes */
    src: local('NanumGothic'),
         url('../fonts/nanum-gothic-v17-korean_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/nanum-gothic-v17-korean_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/nanum-gothic-v17-korean_latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/nanum-gothic-v17-korean_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/nanum-gothic-v17-korean_latin-regular.svg#NanumGothic') format('svg'); /* Legacy iOS */
  }
  /* nanum-gothic-700 - korean_latin */
  @font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/nanum-gothic-v17-korean_latin-700.eot'); /* IE9 Compat Modes */
    src: local('NanumGothic Bold'), local('NanumGothic-Bold'),
         url('../fonts/nanum-gothic-v17-korean_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/nanum-gothic-v17-korean_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/nanum-gothic-v17-korean_latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/nanum-gothic-v17-korean_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/nanum-gothic-v17-korean_latin-700.svg#NanumGothic') format('svg'); /* Legacy iOS */
  }
  /* nanum-gothic-800 - korean_latin */
  @font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/nanum-gothic-v17-korean_latin-800.eot'); /* IE9 Compat Modes */
    src: local('NanumGothic ExtraBold'), local('NanumGothic-ExtraBold'),
         url('../fonts/nanum-gothic-v17-korean_latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/nanum-gothic-v17-korean_latin-800.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/nanum-gothic-v17-korean_latin-800.woff') format('woff'), /* Modern Browsers */
         url('../fonts/nanum-gothic-v17-korean_latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/nanum-gothic-v17-korean_latin-800.svg#NanumGothic') format('svg'); /* Legacy iOS */
  }
  /* nanum-pen-script-regular - korean_latin */
@font-face {
    font-family: 'Nanum Pen Script';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/nanum-pen-script-v15-korean_latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Nanum Pen'), local('NanumPen'),
         url('../fonts/nanum-pen-script-v15-korean_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/nanum-pen-script-v15-korean_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/nanum-pen-script-v15-korean_latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/nanum-pen-script-v15-korean_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/nanum-pen-script-v15-korean_latin-regular.svg#NanumPenScript') format('svg'); /* Legacy iOS */
  }

/* NOTE : 반응형 */
@media (max-width : 1800px){
    body > div#wrap > div#header > div#header_wrap{width: 80%;}
}
@media (max-width : 1255px){
    body > div#wrap > div#content > div > div.text{width: 80%; margin: 0;}
    body > div#wrap > div#content > div > div.text > div.button > h2{font-size: 30px;}
    body > div#wrap > div#content > div > div.text > div.button > h1{font-size: 40px; margin-bottom: 10px;}
    body > div#wrap > div#content > div > div.text > div.button > div.button_headline > h3{font-size: 20px; margin-bottom: 10px;}
    body > div#wrap > div#content > div > div.text > div.button > div.button_headline > p{font-size: 14px;}

    body > div#wrap > div#content > div > div.text > div.button > div.button_contents > button{width: 150px; height: 35px; font-size: 16px;}
}
@media (max-width : 1050px){
    body > div#wrap > div#header > div#header_wrap{width: 90%;}
    body > div#wrap > div#content > div > div.text > div.button > div.button_headline > p{font-size: 12px;}
}
@media (max-width : 830px){
    body > div#wrap > div#header > div#header_wrap{width: 95%;}
}