@CHARSET "UTF-8";


/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,textarea,p,th,td { padding: 0; margin: 0}
a{text-decoration:none; color: #fff}
table {border-spacing: 0}
caption {display: none}
strong{font-weight: bold;}
ol,ul {list-style: none;margin:0;padding:0;}
h1,h2 {font-weight:bolder;font-size: 100%;margin:0;padding:0}
body{font-family: 'NanumSquare', sans-serif}
section{text-align:center; min-height: 500px}
p {word-break:keep-all}
h1{font-size: 56px}


/* nav */
header {position:fixed; top: 0; left: 0; background: #F16B16; z-index: 70; width: 100%}
header>div {position:relative; height: 100px; overflow: hidden}
header>div>.logo {position: absolute; left: 0; top: 28px }
header>div>ul {display: block; text-align: right}
header>div>ul>li {display: inline-block}
header>div>ul>li>a {display: block; padding: 40px 21px; font-size: 20px;font-weight: bold}


/* grap */
.grap {width: 802px; margin: 0px auto}
.grap.x0 {width: 493px}
.grap.x1 {width: 790px}
.grap.x2 {width: 1055px}
.grap.x3 {width: 1360px}


/* intro */
#c-intro {background:#F16B16 url(../img/bg1.png) no-repeat center bottom; color:#fff; min-height: 912px; padding-top: 181px;position: relative}
#c-intro>.tens {position: relative}
#c-intro>.tens>h1 {line-height: 1.5}
#c-intro>.tens>small {font-size: 25px; line-height: 2}
#c-intro>.tens>p {font-size: 28px; line-height: 1.5; margin-top: 10px}
#c-intro>.tens>.laurel-l, #c-intro .tens>.laurel-r{position: absolute; bottom: 0; width: 42px; height: 150px; background-repeat: no-repeat}
#c-intro>.tens>.laurel-l {background: url(../img/laurel-l.png); left: -40px}
#c-intro>.tens>.laurel-r {background: url(../img/laurel-r.png); right: -40px}
#c-intro>.brain {background: url(../img/icon_01.png) no-repeat center; width: 857px; height: 557px;position: absolute; left: 50%; bottom: 30px; margin-left: -428px; z-index: 10}
#c-intro>.stars {background: url(../img/icon_02.png) no-repeat center; width: 100%; max-width: 1528px; height: 483px;position: absolute; left: 50%; bottom: 30px; margin-left: -764px; z-index: 9}


/* c-greetings */
#c-greetings {padding: 200px 0; position: relative}
#c-greetings>h1 {font-size: 50px; margin-bottom: 60px}
#c-greetings>h1::before{content: "\"" }
#c-greetings>h1::after{content: "\"" }
#c-greetings>p{font-size: 24px; line-height: 1.5; text-align: left}
#c-greetings>.sign{font-size: 24px; line-height: 1.5; text-align: right; padding-right: 160px; background: url(../img/sign.png) no-repeat right center; height: 60px; line-height: 60px }
#c-greetings>.light-top, #c-greetings>.light-bottom {background-repeat: no-repeat; position: absolute}
#c-greetings>.light-top {background: url(../img/light1.png); width: 213px; height: 247px; top: 35px; right: -213px}
#c-greetings>.light-bottom {background: url(../img/light2.png); width: 332px; height:281px; bottom: 0px; left: -332px}


/* c-business */
#c-business {padding: 261px 0; background:#F9C95B}
#c-business>div>h1 {color: #fff; margin-bottom: 60px}
.table {display: table; width: 100%;table-layout: fixed}
.table>div {display: table-cell; vertical-align: top; background: #fff; border-radius:10px; margin: 0 10px; padding: 51px 35px}
.table>div.l {width: 20px; background: none; padding: 0}
.table>div>img {display: block;padding-bottom: 31px; margin: 0px auto}
.table>div>h2 {display: block;font-size: 30px; color: #F16B16; margin-bottom: 23px }
.table>div>p {font-size: 20px; line-height: 1.5 }


/* c-curriculum */
#c-curriculum {padding: 83px 0}
#c-curriculum>h1 {margin-bottom: 65px}
table {font-size: 24px;word-break:keep-all}
table th, td {padding: 28px 52px; vertical-align: middle; border-bottom: 2px solid #fff}
table thead th {background: #F9C95B; color: #fff}
table thead th, table tbody th {border-right: 2px solid #fff}
table tbody th, table tbody td {background: #FFF2D5}
table tbody td {text-align: left}
table tbody td span {display: inline-block; margin-right: 16px; margin-bottom: 5px}
table tbody td span::before {content:"·"}


/* c-contact */
#c-contact {padding: 148px 0; background: #F16B16}
#c-contact>.tens {position: relative; color: #fff; margin-bottom: 49px}
#c-contact>.tens>h1 {line-height: 1.5}
#c-contact>.tens>small {font-size: 25px; line-height: 2}
#c-contact>.tens>p {font-size: 28px; line-height: 1.5; margin-top: 10px}
#c-contact>.tens>.laurel-l, #c-contact .tens>.laurel-r{position: absolute; bottom: 0; width: 42px; height: 150px; background-repeat: no-repeat}
#c-contact>.tens>.laurel-l {background: url(../img/laurel-l.png); left: 30px}
#c-contact>.tens>.laurel-r {background: url(../img/laurel-r.png); right: 30px}

address {background: #fff; -webkit-box-shadow: 3px 0px 30px 0px rgba(0,0,0,0.39);-moz-box-shadow: 3px 0px 30px 0px rgba(0,0,0,0.39);box-shadow: 3px 0px 30px 0px rgba(0,0,0,0.39);position: relative; font-style: normal}
address>div, address>ul {padding-left: 34px; padding-right: 34px; text-align: left}
address>.name, address>.sub, address>.ul {font-size: 30px; color: #F16B16; font-weight: bold; display: block}
address>.name {padding-top: 40px}
address>.sub {padding-bottom: 37px}
address>.address {padding-bottom: 78px; font-size: 20px; line-height: 1.5}

.add-card {display: block; width: 50%}
.add-card::after {content: ""; display:block; clear:both;}
.add-card>li {display: inline-block; width: 50%; float: left}
.add-card>li>strong {display: block; color: #888888; font-size: 24px; line-height: 2}
.add-card>li>span {display: block; font-size: 24px; line-height: 2; margin-bottom: 30px}

#map_grap {position: absolute;top: 0;right: -34px; width: 50%}
.iw_inner {}

/* 1430px 이하 디바이스 */
@media screen and (max-width: 1430px) {
  .grap.x3 {width: auto; padding-left: 15px; padding-right: 15px}
  
  /* nav */
  header>div>.logo {left: 15px}
  
  /* c-greetings */
  #c-greetings>.light-top {top: 30px; right: -55px}
  #c-greetings>.light-bottom {height:230px; bottom: 0; left: 0}
  
  /* c-contact */
  .add-card {width:auto}
  .add-card>li {width: 25%}
  #map_grap {position: inherit;width: 100%; padding: 0;right: inherit;top: inherit}
}

/* 1055px 이하 디바이스 */
@media screen and (max-width: 1055px) {
  .grap.x2,
  .grap.x3{width: auto; padding-left: 15px; padding-right: 15px}
  
  /* intro */
  #c-intro>.brain {position: inherit; left: inherit; bottom:inherit; margin: 50px auto 0 auto; background-size: contain; background-size: 90%; width: auto}
  
  /* c-greetings */
  #c-greetings>.light-top {top: 0px; right: 0px; width:140px}
  #c-greetings>p {padding: 0 15px}
  
  /* c-business */
  .table {display: block;table-layout:inherit}
  .table>div {display:block; vertical-align: top; background: #fff; width: auto; margin-bottom: 20px}
  .table>div.l {display: none}
  
  /* c-contact */
  .add-card>li {width: 50%}
}

/* 790px 이하 디바이스 */
@media screen and (max-width: 790px) {
  .grap.x1,
  .grap.x2,
  .grap.x3{width: auto; padding-left: 15px; padding-right: 15px}
}

/* 620px 이하 디바이스 */
@media screen and (max-width: 620px) {
  h1 {font-size: 40px}
  
  /* c-contact */
  .add-card>li {width: 100%}
  
  /* nav */
  header>div>ul {display: none}
  
  /* intro */
  #c-intro {min-height: 565px; background: #F16B16 url(../img/bg2.png) no-repeat center bottom;}
  #c-intro>.tens>small {font-size: 20px}
  #c-intro>.tens>p {font-size: 18px}
  #c-intro>.brain {height: 350px;}
  
  #c-greetings>p {font-size: 20px}
  #c-greetings>.sign {margin-top: 30px}
  #c-greetings>.light-bottom {height: 170px}
  #c-greetings>.light-top {display: none}
}

/* 493px 이하 디바이스 */
@media screen and (max-width: 493px) {
  .grap.x0,
  .grap.x1,
  .grap.x2,
  .grap.x3{width: auto; padding-left: 15px; padding-right: 15px}
  
  
  .laurel-l, .laurel-r {display: none}
  table {font-size: 15px}
  table th, td {padding-left: 15px; padding-right: 15px}
}

  /* .grap {width: 802px; margin: 0px auto}
.grap.x0 {width: 493px}
.grap.x1 {width: 790px}
.grap.x2 {width: 1055px}
.grap.x3 {width: 1360px}*/