@charset "UTF-8";
@import url(font.css);

/* common */
body {position: relative; line-height:inherit;background:inherit;color:#333;font-family: "Nanum Gothic","나눔고딕","ng","맑은 고딕","malgun gothic","AppleGothic","dotum";font-size: 13px;line-height: 1.8em;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button {margin:0;padding:0}
fieldset,img {border:0}
ul {list-style:none;padding-left:0}
img {max-width:100%}
button {border:0;background-color:transparent;cursor:pointer}
select {padding:4px;border:1px solid #ddd;border-radius:0!important}
textarea {width:100%;padding:5px;border:1px solid #dcdcdc;border-radius:0px;resize:none}
em {font-style:normal}
a, a:hover, a:focus, a:visited, a:active {text-decoration:none;color:#333}
caption {overflow:hidden;text-indent:-99999px;font-size:0;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;border:0;padding:0}

.mt50{margin-top:50px!important}

.wrap{position:relative; width: 764px; margin: auto; padding-top: 15%; transform: translateY(-15%)}
.top {text-align: center;}
.top h1{position: relative; line-height: 1.3em; font-weight: 600; font-size: 35px; color: #333;font-family: "NanumSquare"}
.top h1::after{content: ""; display: inline-block; position: absolute; width: 52px; height: 4px; background: #ddd; left: 0; bottom: -25px; margin-left: 50%; transform: translateX(-50%);}
.top h1 span{color:#d84a4a;}
.top p{font-size: 17px; font-weight: 600; color:#555; letter-spacing: -1.5px;}

.sub{position: relative; background: #1984bf; min-height: 233px; margin-top: 30px; padding-left: 30px; border-radius: 45px;}
.sub::before{content: " "; position: absolute; bottom: 15px; right: 15px; width: 248px; height: 194px; background: url(../images/bg-img.png)}
.sub ul{display: inline-block; padding:35px 0}
.sub li{position: relative; margin-left: 15px; margin-bottom: 5px; font-size: 17px; line-height: 24px; color: #fff; font-weight: 600}
.sub li::before{content: ""; display: inline-block; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #eef973; left: -15px; top: 9px}
.sub li .sub-dep02{position: relative; display: inline-block; padding: 10px 0 0}
.sub li .sub-dep02 li{position: relative; display: inline-block; padding-left: 10px; font-size: 15px; font-weight: 400}
.sub li .sub-dep02 li::before{content: ""; display: inline-block; position: absolute; width: 10px; height: 2px; border-radius: 0; background: #9dbfd2; left: -10px; top: 11px}


.sns {text-align: center;}
.sns h1{position: relative; line-height: 1.3em; font-weight: 600; font-size: 35px; color: #333;font-family: "NanumSquare"}
.sns h1::after{content: ""; display: inline-block; position: absolute; width: 52px; height: 4px; background: #ddd; left: 0; bottom: -25px; margin-left: 50%; transform: translateX(-50%);}
.sns h1 span{color:#d84a4a;}
.sns p{font-size: 17px; font-weight: 600; color:#555; letter-spacing: -1.5px;}
.sns ul{display: inline-block; padding:35px 0}
.sns li{position: relative; margin-left: 15px; margin-bottom: 5px; font-size: 17px; line-height: 24px; font-weight: 600}
.sns li::before{content: ""; display: inline-block; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #eef973; left: -15px; top: 9px}





@media (max-width: 991px) {
  .wrap{width: 100%; padding-top: 30px; transform: inherit; margin-top: 50px}
  .top h1{font-size: 29px}
  .top{padding: 0 15px}
  .sub{background:#1984bf; margin:30px 15px;}
  .sns h1{font-size: 29px;  margin:30px 15px;}
}

@media (max-width: 767px) {
  .sub::before{display: none}
  .sub li{margin-left: 0; font-size: 15px; line-height: 22px; margin-right: 10px;}
}