@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://fonts.googleapis.com/css?family=Lato');

html, body {width:100%; margin:0;padding:0;font-family:"NotoSansKR",'Lato', sans-serif; font-size:16px; color:#000000; -webkit-text-size-adjust:none; background-color:#eeeeee;}
p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,img, pre{font-family:'NotoSansKR','Lato', sans-serif; margin:0;padding:0;word-break:keep-all;}
input,button,select,textarea{vertical-align:middle;}
input[type="checkbox"], input[type="radio"] {margin:1px 0 0 0;vertical-align:top;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
ul, ol, li {list-style:none;}
img, fieldset, iframe {border:0 none;vertical-align:top;}
table{border-collapse:collapse;}
a {color:inherit;text-decoration:none}
caption, legend {display:none;}
em,address{font-style:normal;}
.hide {display:block;position:absolute;top:-9999px;left:-9999px;width:1px;height:1px;line-height:0;overflow:hidden;font-size:0;text-indent:-9999px;}
hr, .connone {display:none;}
div {-webkit-text-size-adjust:none;}
p { word-wrap:break-word; word-break:break-all; -webkit-text-size-adjust:none;}
button, button:hover, button:active, button:focus{border:0 none;background:none;cursor:pointer;outline:none;overflow:hidden;}
main{display:block;}
.inner{margin:0 auto;width:1000px;box-sizing:border-box;}
i.ico{display:inline-block;font-size:0;line-height:0;text-indent:-9999px;overflow:hidden;}
figure { margin:0; }
strong, th { font-weight:normal; }
textarea { resize:none; }
.skip .skip_contents { position:absolute; z-index:9999; top:-35px; width:100%; height:33px; line-height:33px; text-align:center; text-decoration:none; color:#000000; background:#ffffff; opacity:0.9; filter:alpha(opacity=90); }
.skip a:focus { top:0; }

h3 {font-size:16px; letter-spacing:-0.5px;}

.verticalSpacer10 {clear:both; height:10px;}
.verticalSpacer20 {clear:both; height:20px;}
.verticalSpacer30 {clear:both; height:30px;}
.verticalSpacer40 {height:40px;}
.verticalSpacer50 {height:50px;}
.verticalSpacer70 {height:70px;}
.verticalSpacer500 {height:500px;}


#wrap {position:relative; width:100%; }


@media all and (min-width:1181px){
#header {width:1180px; text-align:left;  margin:0 auto; }
#header .top {padding:0px;}
#header .top .inner {width:100%; margin:0 auto;position:relative;height:60px;}
#header .top .logo {text-align:center; padding:30px 0px 30px 0px; border-bottom:1px solid #cbcbcb;}
#header .top .gnb {margin-right:0px; text-align:center; }
#header .top .gnb li{float:left; width:195px; font-family: 'Lato', sans-serif; font-size:21px; padding:10px 0px 0px 0px;}
#header .top .gnb li a:hover {color:#cd161e;}
#header .top .gnb li.active > a{color:#cd161e;}

#mainVisualArea {width:1180px; text-align:left; height:600px; margin:0 auto; border-top:3px solid #000000; border-bottom:1px solid #e5e5e5; background-color:#fff;}
#mainVisualArea .visual_wrap{padding:50px 50px 0 50px;}

/* main visual */
#wrap.main #container {width:1080px; padding:0;}
#wrap.main #container > div {width:1080px; min-width:1080px; margin:0 auto; overflow:hidden;}
#wrap.main #container .product-wrap > div {height:510px; margin:0 auto; padding:70px 0 0; overflow:hidden;}
#wrap.main #container .family-wrap > div {width:1140px; margin:0 auto; padding:70px 0 90px;}
#wrap.main #container .community-wrap > div {width:1140px; margin:0 auto; padding:70px 0 90px;}
#wrap.main #dFoot {margin:0;}

#wrap.main #container h3 {color:#222; font-size:46px; line-height:46px; font-weight:500; text-align:center;}
#wrap.main #container h3 span {display:block; margin-top:20px; color:#666; font-size:22px; line-height:22px; font-weight:300;}
#wrap.main #container .family-wrap h3 {color:#fff;}
#wrap.main #container .family-wrap h3 span {color:#fff;}
#wrap.main #container .community-wrap h3 span {color:#222;}

.visual-banner { position:relative; height:510px; }
.visual-banner > ul {position:relative; width:1080px;  margin:0 auto;}
.visual-banner > ul li {position:absolute; top:0; opacity:0; filter:alpha(opacity=0); transition:all 0.5s ease-in;}
.visual-banner > ul li.on {opacity:1; filter:alpha(opacity=100); transition:all 0.5s ease-in; z-index:10;}
.visual-banner > ul li a {display:block; width:1080px; height:100%; margin:0 auto;}
.visual-banner .slide-contents > li {width:1080px; height:510px;}
.visual-banner .control {position:absolute; bottom:45px; width:100%; height:12px; margin:0; padding:0; text-align:center; z-index:100;}
.visual-banner .control > a {display:inline-block; width:12px; height:12px; background:url("../images/ico_slide_control_on.png") no-repeat; vertical-align:top;}
.visual-banner .control > a.on  {width:26px; background:url("../images/ico_slide_control2_on.png") no-repeat;}
.visual-banner .control-arrows a {position:absolute; top:50%; width:78px; height:78px; margin-top:-20px; z-index:100;}
.visual-banner .control-arrows a.prev {left:50%; margin-left:-500px;}
.visual-banner .control-arrows a.next {right:50%; margin-right:-540px;}

.visual-txt{margin:0 auto; padding:45px 0 0 0; text-align:center; letter-spacing:-1px; color:#898989; line-height:24px;}

#mainContentsArea {position:relative; width:1180px; height:520px; margin:0 auto; background-color:#fff;}
#mainContents {padding:50px 0px 0px 120px;}

#footerArea {width:1180px; text-align:left; height:490px; margin:0 auto; background-color:#333336; text-align:center; }
#footerArea .footer_tt{font-size:30px; color:#fff; font-family: 'Lato', sans-serif; font-weight:900; padding:70px 0px 90px 0px; letter-spacing:2px;}
#footerArea .contacts {padding:0px 0px 0px 140px;}
#footerArea .contacts li{float:left; width:300px;}
#footerArea .contacts li dt{font-size:18px; color:#fff; font-family: 'Lato', sans-serif; height:30px; padding:30px 0px 10px 0px;}
#footerArea .contacts li dd{font-size:15px; color:#898989; letter-spacing:-1px; line-height:27px;}

#subContentsArea {width:1180px; text-align:left; margin:0 auto; border-top:3px solid #000000; background-color:#fff; display:table;}
#subVisualArea {width:1180px; text-align:left; height:220px; }
#subVisualArea .visual_wrap{padding:50px; height:220px;}

#subTitle {width:1080px; text-align:left; margin:0 auto; background-color:#fff;}
#subTitle .title_wrap{width:1080px; height:70px; background-color:#333336; margin-top:50px; color:#fff;}
.title{float:left; padding:20px 0px 0px 20px; font-size:21px;font-weight:900;}
.location {float:right; padding:20px 20px 0px 0px; font-size:14px; line-height:30px;}
#subContents {width:1180px; text-align:left; margin:0 auto; background-color:#fff;}
#subContents .contents01 {letter-spacing:-1px; color:898989; font-size:15px; line-height:27px; padding:70px 50px 0px 50px;}
#subContents .contents01 .left_img{padding-right:70px; float:left;}
#subContents .contents01 .org{padding-left:70px;}
#subContents .contents01 li{float:left; width:290px; letter-spacing:0.5px; color:898989; font-size:15px; line-height:27px;}
#subContents .contents02 {padding:20px 50px 0px 50px;}
#subContents .contents03 {letter-spacing:-1px; color:898989; font-size:15px; line-height:27px; padding:70px 50px 0px 50px; text-align:center;}
#subContents dl{margin:0 auto; width:1080px;}
#subContents dd{width:555px; padding:0 0 30px 0; float:left;}
#subContents dd:nth-child(even){width:520px;}
#subContents .contents0301 {float:left; width:520px; border:1px solid #dfdfdf;}
#subContents .contents0301 ul li {float:left; width:220px; }
.cont03_txt {font-size:15px; color:#898989; line-height:21px; letter-spacing:-1px; }
#subContents .contents04 {padding:70px 50px 0px 50px; letter-spacing:-1px; color:#898989; line-height:27px;}
#subfooterArea {width:1180px; padding:10px; text-align:left; margin:0 auto; text-align:center;}

.nav-btn {display:none;}
}



@media all and (min-width:750px) and (max-width:1180px){
#header {width:100%; text-align:left;  margin:0 auto; }
#header .top {padding:0px;}
#header .top .inner {width:100%; margin:0 auto;position:relative;height:60px;}
#header .top .logo {text-align:center; padding:30px 0px 30px 0px; border-bottom:1px solid #cbcbcb;}
#header .top .gnb {margin-right:0px; text-align:center; }
#header .top .gnb li{float:left; width:16%; font-family: 'Lato', sans-serif; font-size:21px; padding:10px 0px 0px 0px;}
#header .top .gnb li a:hover {color:#cd161e;}
#header .top .gnb li.active > a{color:#cd161e;}

#mainVisualArea {width:100%; text-align:left; margin:0 auto; border-top:3px solid #000000; border-bottom:1px solid #e5e5e5; background-color:#fff; overflow:hidden;}
#mainVisualArea .visual_wrap{padding:0px;}

/* main visual */
#wrap.main #container {width:100%; padding:0;}
#wrap.main #container > div {width:100%; min-width:100%; margin:0 auto; overflow:hidden;}
#wrap.main #container .product-wrap > div {height:110px; margin:0 auto; padding:70px 0 0; overflow:hidden;}
#wrap.main #container .family-wrap > div {width:1140px; margin:0 auto; padding:70px 0 90px;}
#wrap.main #container .community-wrap > div {width:1140px; margin:0 auto; padding:70px 0 90px;}
#wrap.main #dFoot {margin:0;}

#wrap.main #container h3 {color:#222; font-size:46px; line-height:46px; font-weight:500; text-align:center;}
#wrap.main #container h3 span {display:block; margin-top:20px; color:#666; font-size:22px; line-height:22px; font-weight:300;}
#wrap.main #container .family-wrap h3 {color:#fff;}
#wrap.main #container .family-wrap h3 span {color:#fff;}
#wrap.main #container .community-wrap h3 span {color:#222;}

.visual-banner { position:relative; width:100%; height:210px; }
.visual-banner > ul {position:relative; width:100%;  margin:0 auto;}
.visual-banner > ul li {position:absolute; top:0; opacity:0; filter:alpha(opacity=0); transition:all 0.5s ease-in;}
.visual-banner > ul li.on {opacity:1; filter:alpha(opacity=100); transition:all 0.5s ease-in; z-index:10;}
.visual-banner > ul li img {display:block; width:100%; margin:0 auto;}
.visual-banner .slide-contents > li {width:100%; height:210px;}
.visual-banner .control {position:absolute; bottom:45px; width:100%; height:12px; margin:0; padding:0; text-align:center; z-index:100;}
.visual-banner .control > a {display:inline-block; width:12px; height:12px; background:url("../images/ico_slide_control_on.png") no-repeat; vertical-align:top;}
.visual-banner .control > a.on  {width:26px; background:url("../images/ico_slide_control2_on.png") no-repeat;}

.visual-txt{width:100%; margin:0; padding:0;}
.visual-txt p{margin:20px auto; padding:0; width:90%; text-align:center; letter-spacing:-1px; color:#898989; line-height:24px; word-break:keep-all;}
.visual-txt img{width:100%;}

#mainContentsArea {position:relative; width:100%; margin:0 auto; background-color:#fff;}
#mainContents {margin:0 auto; padding:20px 0 20px 0; text-align:center;}
#mainContents img{width:90%;}

#footerArea {width:100%; text-align:left; margin:0 auto; background-color:#333336; text-align:center; display:inline-block;}
#footerArea .footer_tt{font-size:30px; color:#fff; font-family: 'Lato', sans-serif; font-weight:900; padding:50px 0px 50px 0px; letter-spacing:2px;}
#footerArea .contacts {padding:0px; }
#footerArea .contacts li{float:left; width:100%; padding:0 0 50px 0;}
#footerArea .contacts li dt{font-size:18px; color:#fff; font-family: 'Lato', sans-serif; height:30px; padding:30px 0px 10px 0px;}
#footerArea .contacts li dd{font-size:15px; color:#898989; letter-spacing:-1px; line-height:27px;}

#subContentsArea {width:100%; text-align:left; margin:0 auto; border-top:3px solid #000000; background-color:#fff; display:table;}
#subVisualArea {width:100%; text-align:left;}
#subVisualArea .visual_wrap{padding:0px;}
#subVisualArea .visual_wrap img{width:100%;}

#subTitle {width:100%; text-align:left; margin:0 auto; background-color:#fff;}
#subTitle .title_wrap{width:100%; height:70px; background-color:#333336; color:#fff;}
.title{float:left; padding:20px 0px 0px 20px; font-size:21px;font-weight:900;}
.location {float:right; padding:20px 20px 0px 0px; font-size:14px;}

#subContents {width:100%; text-align:left; margin:0 auto; background-color:#fff;}
#subContents .contents01 {letter-spacing:-1px; color:898989; font-size:15px; line-height:27px; padding:30px 20px 0px 20px;}
#subContents .contents01 .left_img{display:none;}
#subContents .contents01 h3 img{width:100%;}
#subContents .contents01 .org{width:100%;}
#subContents .contents02 {padding:20px 0 0 0;}
#subContents .contents02 img{width:100%;}
#subContents .contents03 {letter-spacing:-1px; color:898989; font-size:15px; line-height:27px; padding:70px 20px 0px 20px; text-align:center;}
#subContents .contents03 h3 img{width:100%;}

#subContents dl{margin:0 auto; width:95%;}
#subContents dd{width:100%; padding:0 0 30px 0; float:left;}
#subContents .contents0301 {float:left; width:100%; border:1px solid #dfdfdf;}
#subContents .contents0301 ul li:nth-child(1) {width:40%; float:left;}
#subContents .contents0301 ul li:nth-child(2) {width:50%; float:left;}
#subContents .contents0301 ul li .item_img{width:100%;}

.cont03_txt {font-size:15px; color:#898989; line-height:21px; letter-spacing:-1px; }
#subContents .contents04 {padding:70px 50px 0px 50px; letter-spacing:-1px; color:#898989; line-height:27px;}
#subfooterArea {width:100%; margin:0; padding:0; text-align:left; margin:0 auto; background-color:#fff; text-align:center;  border-top:1px solid #e5e5e5; }

.nav-btn {display:none;}
}


@media all and (min-width:0px) and (max-width:750px){
#header {width:100%; text-align:left;  margin:0 auto;}
#header .top {padding:0px;}
#header .top .inner {width:100%; margin:0 auto;position:relative;height:60px;}
#header .top .logo {text-align:center; padding:30px 0px 30px 0px; border-bottom:1px solid #cbcbcb;}
/*
#header .top .gnb {margin-right:0px; text-align:center; }
#header .top .gnb li{float:left; width:20%; font-family: 'Lato', sans-serif; font-size:16px; padding:15px 0px 0px 0px;}
#header .top .gnb li a:hover {color:#cd161e;}
#header .top .gnb li.active > a {color:#cd161e;}
*/
.nav-container {
  display: flex;
  align-items: center;
  padding: 10px;
  position: relative;
}

.nav-wrapper {
  overflow-x: auto; /* °¡·Î ½ºÅ©·Ñ Çã¿ë */
  white-space: nowrap; /* Ç׸ñµéÀÌ ÇÑ ÁÙ·Î ³ª¿­µÇµµ·Ï ¼³Á¤ */
  scroll-behavior: smooth; /* ½ºÅ©·ÑÀ» ºÎµå·´°Ô À̵¿ */
  -ms-overflow-style: none; /* IE, Edge¿¡¼­ ½ºÅ©·Ñ¹Ù ¼û±â±â */
  scrollbar-width: none; /* Firefox¿¡¼­ ½ºÅ©·Ñ¹Ù ¼û±â±â */
}

.nav-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari¿¡¼­ ½ºÅ©·Ñ¹Ù ¼û±â±â */
}

.gnb {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gnb li a {
  display: block;
  font-size:20px;
  padding: 0px 15px 0 15px;
  text-decoration: none;
}

.gnb li.active > a {color:#cd161e;}

/* ¹öÆ° ½ºÅ¸ÀÏ */
.nav-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 0 15px 0 15px;
  z-index: 10;
}


#mainVisualArea {width:100%; text-align:left; margin:0 auto; border-top:3px solid #000000; border-bottom:1px solid #e5e5e5; background-color:#fff; overflow:hidden;}
#mainVisualArea .visual_wrap{padding:0px;}

/* main visual */
#wrap.main #container {width:100%; padding:0;}
#wrap.main #container > div {width:100%; min-width:100%; margin:0 auto; overflow:hidden;}
#wrap.main #container .product-wrap > div {height:510px; margin:0 auto; padding:70px 0 0; overflow:hidden;}
#wrap.main #container .family-wrap > div {width:1140px; margin:0 auto; padding:70px 0 90px;}
#wrap.main #container .community-wrap > div {width:1140px; margin:0 auto; padding:70px 0 90px;}
#wrap.main #dFoot {margin:0;}

#wrap.main #container h3 {color:#222; font-size:46px; line-height:46px; font-weight:500; text-align:center;}
#wrap.main #container h3 span {display:block; margin-top:20px; color:#666; font-size:22px; line-height:22px; font-weight:300;}
#wrap.main #container .family-wrap h3 {color:#fff;}
#wrap.main #container .family-wrap h3 span {color:#fff;}
#wrap.main #container .community-wrap h3 span {color:#222;}

.visual-banner { position:relative; width:100%; height:210px; }
.visual-banner > ul {position:relative; width:100%;  margin:0 auto;}
.visual-banner > ul li {position:absolute; top:0; opacity:0; filter:alpha(opacity=0); transition:all 0.5s ease-in;}
.visual-banner > ul li.on {opacity:1; filter:alpha(opacity=100); transition:all 0.5s ease-in; z-index:10;}
.visual-banner > ul li img {display:block; width:100%; margin:0 auto;}
.visual-banner .slide-contents > li {width:100%; height:210px;}
.visual-banner .control {position:absolute; bottom:45px; width:100%; height:12px; margin:0; padding:0; text-align:center; z-index:100;}
.visual-banner .control > a {display:inline-block; width:12px; height:12px; background:url("../images/ico_slide_control_on.png") no-repeat; vertical-align:top;}
.visual-banner .control > a.on  {width:26px; background:url("../images/ico_slide_control2_on.png") no-repeat;}

.visual-txt{width:100%; margin:0; padding:0;}
.visual-txt p{margin:20px auto; padding:0; width:90%; text-align:center; letter-spacing:-1px; color:#898989; line-height:24px; word-break:keep-all;}
.visual-txt img{width:100%;}

#mainContentsArea {position:relative; width:100%; margin:0 auto; background-color:#fff;}
#mainContents {margin:0 auto; padding:20px 0 20px 0; text-align:center;}
#mainContents img{width:90%;}

#footerArea {width:100%; text-align:left; margin:0 auto; background-color:#333336; text-align:center; display:inline-block;}
#footerArea .footer_tt{font-size:30px; color:#fff; font-family: 'Lato', sans-serif; font-weight:900; padding:50px 0px 50px 0px; letter-spacing:2px;}
#footerArea .contacts {padding:0px; }
#footerArea .contacts li{float:left; width:100%; padding:0 0 50px 0;}
#footerArea .contacts li dt{font-size:18px; color:#fff; font-family: 'Lato', sans-serif; height:30px; padding:30px 0px 10px 0px;}
#footerArea .contacts li dd{font-size:15px; color:#898989; letter-spacing:-1px; line-height:27px;}

#subContentsArea {width:100%; text-align:left; margin:0 auto; border-top:3px solid #000000; background-color:#fff; display:table;}
#subVisualArea {width:100%; text-align:left;}
#subVisualArea .visual_wrap{padding:0px;}
#subVisualArea .visual_wrap img{width:100%;}

#subTitle {width:100%; text-align:left; margin:0 auto; background-color:#fff;}
#subTitle .title_wrap{width:100%; height:70px; background-color:#333336; color:#fff;}
.title{float:left; padding:20px 0px 0px 20px; font-size:21px;font-weight:900;}
.location {float:right; padding:20px 20px 0px 0px; font-size:14px;}

#subContents {width:100%; text-align:left; margin:0 auto; background-color:#fff;}
#subContents .contents01 {letter-spacing:-1px; color:898989; font-size:15px; line-height:27px; padding:30px 20px 0px 20px;}
#subContents .contents01 .left_img{display:none;}
#subContents .contents01 h3 img{width:100%;}
#subContents .contents01 .org{width:100%;}
#subContents .contents02 {padding:20px 0 0 0;}
#subContents .contents02 img{width:100%;}
#subContents .contents03 {letter-spacing:-1px; color:898989; font-size:15px; line-height:27px; padding:70px 20px 0px 20px; text-align:center;}
#subContents .contents03 h3 img{width:100%;}


#subContents dl{margin:0 auto; width:95%;}
#subContents dd{width:100%; padding:0 0 30px 0; float:left;}

#subContents .contents0301 {float:left; width:100%; border:1px solid #dfdfdf;}

#subContents .contents0301 ul li:nth-child(1) {width:40%; float:left;}
#subContents .contents0301 ul li:nth-child(2) {width:50%; float:left;}
#subContents .contents0301 ul li .item_img{width:100%;}



.cont03_txt {font-size:15px; color:#898989; line-height:21px; letter-spacing:-1px; }
#subContents .contents04 {padding:70px 50px 0px 50px; letter-spacing:-1px; color:#898989; line-height:27px;}
#subfooterArea {width:100%; margin:0; padding:0; text-align:left; margin:0 auto; background-color:#fff; text-align:center;  border-top:1px solid #e5e5e5; }

}