body { font-family:"Noto Sans KR", sans-serif !important; word-break:keep-all; }
input:focus, button:focus, textarea:focus { outline:none; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("../img/sub/icon_arrow.png"); background-position:90% 50%; background-size:11px; background-repeat:no-repeat; padding:0 0 0 7px; box-sizing:border-box; }
select::-ms-expand { display: none; }

.wrap { width:1200px; margin:0 auto; }







/* 서브 공통 */
#sub { padding:0 0 135px; }
#sub h3 { font-size:36px; font-weight:500; padding:50px 0; margin:0 0 50px; border-bottom:5px solid #f1f1f1; }
#sub h4.b { font-size:24px; font-weight:700; padding:0 0 0 35px; margin:50px 0 25px; background-image:url('../img/sub/icon_title.png'); background-position:0,50%; background-size:auto; background-repeat:no-repeat; }
#sub p.b20 { font-size:20px; line-height:32px; margin:0 0 20px; font-weight:500; }
#sub p.b17 { font-size:17px; line-height:29px; }
#sub .contents {  }
/* 리우비피에스 푸터랑 딱 붙는 body */
.marginbody { margin:100px 0 -135px; }

#sub {  }
#sub .visual { background-size:cover; background-repeat:no-repeat; background-position:center; }
#sub .visual .wrap { position:relative; height:420px; }
#sub .visual .txt { color:#fff; text-align:center; position:absolute; top:47%; left:50%; transform:translate(-50%,-50%); width:100%; }
#sub .visual .txt p { font-size:20px; font-weight:300; }
#sub .visual .txt h2 { font-size:53px; font-weight:700; text-shadow:10px 10px 10px rgba(63,63,63,0.35); margin:3px 0 0; line-height:56px; }
#sub .visual .depth { background-color:#fff; position:absolute; bottom:0; left:50%; transform:translate(-50%,0); width:100%; height:70px; border-bottom:1px solid rgba(80,80,80,0.15); }
#sub .visual .depth ul {  }
#sub .visual .depth ul > li { float:left; border-left:1px solid rgba(80,80,80,0.15); box-sizing:border-box; position:relative; }
#sub .visual .depth ul > li:first-child { border:0; }
#sub .visual .depth ul > li > a { font-size:18px; font-weight:500; line-height:70px; display:block; }
#sub .visual .depth ul > li.home { width:6%; }
#sub .visual .depth ul > li.home a { text-align:center; }
#sub .visual .depth ul > li.home a img { vertical-align:middle }
#sub .visual .depth ul > li.depth1 { width:47%; position:relative; }
#sub .visual .depth ul > li.depth1 > a { padding:0 0 0 25px; box-sizing:border-box; }
#sub .visual .depth ul > li.depth1 > img { position:absolute; top:50%; right:20px; transform:translate(0,-50%); }
#sub .visual .depth ul > li ol { position:absolute; top:70px; left:-1px; width:100%; background-color:#fff; border:1px solid #eee; padding:7px 0; display:none; z-index:500; }
#sub .visual .depth ul > li ol li {  }
#sub .visual .depth ul > li ol li a { display:block; color:#000; padding:0 0 0 25px; box-sizing:border-box; font-size:17px; line-height:50px; }
#sub .visual .depth ul > li ol li a:hover { background-color:rgba(100,100,100,0.05); }


/* 게시판 페이지 */
.page { text-align:center; padding:5px 0 0; clear:both; }
.page ul { overflow:hidden; display:inline-block; }
.page ul li { float:left; }
.page ul li a { display:inline-block; color:#a5a5a5; font-size:15px; width:35px; height:35px; line-height:35px; margin:0 2px; border:1px solid #ddd; }
.page ul li a:hover { background-color:rgba(5,6,15,0.05); }
.page ul li.on {  }
.page ul li.on a { color:#fff; background-color:#030628; font-weight:700; }
.page ul li.arrow {  }
.page ul li.arrow a { font-size:14px; }






/* 메인 */
#main { margin:-101px 0 0; }

#main .topbtn { position:fixed; bottom:25px; right:25px; box-shadow:3px 3px 8px rgba(57,113,255,0.3); z-index:1000; }
#main .topbtn a { display:block; }
#main .topbtn a img {  }
#main .topbtn.rotate { transform:rotate(180deg); }

#main .contents { padding:120px 0; }
#main .contents .maintit { text-align:center; padding:0 0 50px; }
#main .contents .maintit p { font-size:32px; font-weight:700; }
#main .contents .maintit p b { color:#1d8fce; }
#main .contents .maintit span { font-size:17px; font-weight:300; padding:10px 0 0; display:block; }

#main .visual { position:relative; overflow:hidden; }
#main .visual .slide_box { position:relative; height:100vh; }
#main .visual .slide_box .box { background-repeat:no-repeat; background-position:center; background-size:cover; position:absolute; top:0; left:0; width:100%; height:100%; transition-duration:8s; transform:scale(1.3); }
#main .visual .slide_box .box:first-child { z-index:5; }
#main .visual .slide_box .box.on { z-index:5; transform:scale(1.0); }
/* #main .visual .slide_box .box { background-repeat:no-repeat; background-position:center; background-size:cover; animation:scale1 linear 8s; animation-fill-mode:forwards; position:absolute; top:0; left:0; width:100%; height:100%; }

@keyframes scale1 {
  0% { transform:scale(1.3); }
  100% { transform:scale(1.0); }
} */

#main .visual .txt { color:#fff; position:absolute; top:31%; left:18%; width:100%; z-index:10; display:none; }
#main .visual .txt2 p b br { display:none !important; }
#main .visual .txt p { font-size:56px; font-weight:700; line-height:75px; text-shadow:5px 5px 5px rgba(10,10,10,0.5); }
#main .visual .txt span { font-size:24px; font-weight:300; display:block; margin:20px 0 0; text-shadow:5px 5px 5px rgba(10,10,10,0.7); }
#main .visual .v_page { width:520px; height:120px; background-color:#1d8fce; position:absolute; bottom:0; left:0; z-index:10; }
#main .visual .v_page .btn { position:relative; width:100%; height:100%; }
#main .visual .v_page .btn ul { overflow:hidden; position:absolute; top:50%; right:70px; transform:translate(0,-50%); }
#main .visual .v_page .btn ul li { float:left; position:relative; margin:0 5px; }
#main .visual .v_page .btn ul li a { display:block; width:25px; height:25px; }
#main .visual .v_page .btn ul li.on a { border:2px solid rgba(255,255,255,0.7); border-radius:50%; box-sizing:border-box; }
#main .visual .v_page .btn ul li a span { display:inline-block; width:7px; height:7px; background-color:#fff; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }


#main .board { overflow:hidden; background-image:url('../img/main/board_bg.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; }
#main .board .board0 { float:left; width:50%; }
#main .board .board0 .title { overflow:hidden; padding:0 10px; box-sizing:border-box; }
#main .board .board0 .title strong { font-size:30px; font-weight:700; display:block; padding:0 0 25px; float:left; line-height:30px; }
#main .board .board0 .title .btn { float:right; }
#main .board .board0 .title .btn a { display:block; font-size:14px; font-weight:700; line-height:30px; }
#main .board .board0 .title .btn a img { vertical-align:middle; margin:0 0 3px 5px; }
#main .board .notice { padding:0 3% 0 0; box-sizing:border-box; }
#main .board .notice ol { border-top:3px solid #ccc; }
#main .board .notice ol li { border-bottom:1px solid #ddd; }
#main .board .notice ol li.no { width:97%; }
#main .board .notice ol li.no p { line-height:282px; text-align:center; }
#main .board .notice ol li a { display:block; padding:20px 20px; }
#main .board .notice ol li a:hover p { font-weight:500; }
#main .board .notice ol li a p { font-size:17px; padding:0 0 5px; }
#main .board .notice ol li a span { font-size:14px; }
#main .board .now { padding:0 0 0 3%; box-sizing:border-box; }
#main .board .now ol { margin:-1.5%; }
#main .board .now ol li { float:left; width:47%; margin:1.5%; border:1px solid #ddd; box-sizing:border-box; height:282px; padding:0 8%; }
#main .board .now ol li a { display:block; text-align:center; padding:40px 0; }
#main .board .now ol li a:hover p { font-weight:500; }
#main .board .now ol li a img {  }
#main .board .now ol li a p { font-size:19px; line-height:25px; margin:8px 0 20px; white-space:normal; -webkit-line-clamp:3; -webkit-box-orient:vertical; height:75px; overflow: hidden; text-overflow:ellipsis; }
#main .board .now ol li a span { display:block; font-size:16px; font-weight:500; padding:35px 0 0; }
#main .board .now ol li.no { width:97%; }
#main .board .now ol li.no p { line-height:282px; text-align:center; }


#main .curious { background-color:#f7f7f7; }
#main .curious .wrap {  }
#main .curious .list {  }
#main .curious .list ul { margin:-3%; overflow:hidden; }
#main .curious .list ul li { background-color:#fff; width:27.33%; margin:3%; float:left; }
#main .curious .list ul li a { display:block; padding:28px; box-sizing:border-box; min-height:320px; max-height:320px; position:relative; }
#main .curious .list ul li a p { font-size:24px; font-weight:700; }
#main .curious .list ul li a span { display:block; font-size:18px; line-height:25px; padding:15px 0 0; }
#main .curious .list ul li a .btn { position:absolute; right:30px; bottom:30px; color:#1d8fce; font-weight:700; display:none; font-size:14px; }
#main .curious .list ul li a .btn img { vertical-align:middle; margin:0 0 3px 5px; }
#main .curious .list ul li:hover a { border:4px solid #1d8fce; box-shadow:7px 5px 5px rgba(0,0,0,0.3); }
#main .curious .list ul li:hover p { color:#1d8fce; }
#main .curious .list ul li:hover .btn { display:block; }


#main .banner { height:760px; margin:0 0 65px; background-image:url('../img/main/banner.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment:fixed; position:relative; }
#main .banner .wrap {  }
#main .banner span { width:1px; height:200px; background-color:#fff; position:absolute; top:0; left:50%; transform:translate(-50%,0); display:block; }
#main .banner .txt { text-align:center; padding:250px 0 0; }
#main .banner .txt p { font-size:48px; color:#fff; font-weight:300; }
#main .banner .txt p b { font-weight:700; }
#main .banner .txt .nemo { text-align:center; margin:45px 0 0; }
#main .banner .txt .nemo ul { overflow:hidden; display:inline-block; }
#main .banner .txt .nemo ul li { float:left; width:240px; line-height:80px; text-align:center; color:#fff; border:1px solid #fff; font-size:20px; font-weight:300; }
#main .banner .txt .nemo ul li:first-child { margin:0 25px 0 0; }
#main .banner .box { background-color:#fff; width:920px; text-align:center; position:absolute; bottom:-65px; left:50%; transform:translate(-50%,0); box-shadow:5px 7px 5px rgba(0,0,0,0.15); padding:40px 0; }
#main .banner .box a { display:block; }
#main .banner .box a p { font-size:20px; line-height:32px; font-weight:300; }
#main .banner .box a p b { font-weight:700; color:#1d8fce; }
#main .banner .box a .btn { font-size:14px; font-weight:700; padding:35px 0 0; }
#main .banner .box a .btn img { vertical-align:middle; margin:0 0 3px 5px; }

#main .road { position:relative; }
#main .road .wrap {  }
#main .road .map { position:relative; }
#main .road .map .btn { position:absolute; top:20px; left:50%; transform:translate(-50%,0); }
#main .road .map .btn ul { overflow:hidden; border:1px solid #ccc; }
#main .road .map .btn ul li { float:left; }
#main .road .map .btn ul li:nth-child(2) { border-left:1px solid #ccc; border-right:1px solid #ccc; }
#main .road .map .btn ul li a { display:block; line-height:55px; font-size:16px; width:160px; text-align:center; background-color:#fff; }
#main .road .map .btn ul li.on a { background-color:#1d8fce; color:#fff; }
#main .road .map .iframe {  }
#main .road .map .iframe iframe { width:100%; height:480px; display:none; border:0; overflow:hidden; overflow-y:hidden; }
#main .road .map .iframe iframe html { overflow:hidden; }
#main .road .map .iframe iframe img { display:none; width:100%; height:100%; }
#main .road .map .address { background-color:#1d8fce; position:absolute; bottom:15px; right:15px; }
#main .road .map .address span { font-size:13px; color:#fff; padding:12px 15px; display:none; }




/* 반응형 */
@media screen and (max-width:1280px) {
  .wrap { width:auto; padding:0 50px; box-sizing:border-box; }

  #main .curious .list ul { margin:-2%; }
  #main .curious .list ul li { width:29.33%; margin:2%; }
  #main .curious .list ul li a { min-height:390px; max-height:390px; }
  #main .curious .list ul li a p { font-size:20px; }
  #main .curious .list ul li a span { font-size:16px; padding:12px 0 0; }

  #main .road .map .btn { width:100%; text-align:center; }
  #main .road .map .btn ul { width:570px; display:inline-block; }
  #main .road .map .btn ul li { width:50%; box-sizing:border-box; }
  #main .road .map .btn ul li a { width:auto; }

  #main .visual .txt { left:50px; }
}


@media screen and (max-width:980px) {
  .wrap { padding:0 30px; }
  #sub { padding:0 0 100px; }

  #main { margin:-65px 0 0; }

  #main .curious .list ul { margin:-1%; }
  #main .curious .list ul li { width:31.33%; margin:1%; }
  #main .curious .list ul li a { min-height:365px; max-height:365px; padding:22px; }
  #main .curious .list ul li a .btn { right:22px; bottom:22px; }

  #main .visual .v_page { height:100px; }
  #main .visual .v_page .btn ul { right:15px; }
  #main .banner .box { width:95%; }

}

@media screen and (max-width:768px) {
  #sub h3 { font-size:32px; padding:35px 0; margin:0 0 45px; }
  #sub p.b20 { margin:0 0 15px; }
  #sub .visual .depth ul > li.depth1 > a { padding:0 0 0 20px; font-size:17px; }
  #sub .visual .depth ul > li.home { width:10%; }
  #sub .visual .depth ul > li.depth1 { width:45%; }
  #sub .visual .depth ul > li.home a img { height:18px !important; margin:0 0 2px; }
  #sub .visual .txt { top:43%; }
  #main .curious .list ul { margin:0; }
  #main .curious .list ul li { width:100%; margin:0 0 15px; }
  #main .curious .list ul li a { min-height:inherit; max-height:none; padding:15px; }
  #main .curious .list ul li a span { font-size:15px; padding:7px 0 50px; }
  #main .curious .list ul li a .btn { right:20px; bottom:20px; }

  #main .banner { height:620px; }
  #main .banner span { height:150px; }
  #main .banner .txt { padding:200px 0 0; }
  #main .banner .txt p { font-size:40px; }
  #main .banner .txt .nemo { margin:25px 0 0; }
  #main .banner .txt .nemo ul li { width:200px; line-height:60px; font-size:17px; }
  #main .banner .box { padding:30px 0; }

  #main .road .map .btn ul { width:80%; }
  #main .road .map .btn ul li a { line-height:50px; font-size:15px; }

  #main .topbtn { display:none; }
  #main .road .map .iframe iframe { height:300px; }
  #main .road .map .btn { top:10px; }
  #main .road .map .btn ul li a { line-height:40px; }

  #main .board .board0 { width:100%; }
  #main .board .notice { padding:0; margin:0 0 70px; }
  #main .board .now { padding:0; }


  #main .visual .txt { left:25px; }
  #main .visual .txt p { font-size:45px; line-height:57px; }
  #main .visual .txt span { font-size:22px; padding:0 300px 0 0; }
  #main .visual .slide_box { height:670px; }
  /* #main .visual .slide_box .box { height:670px; } */
  #main .visual .v_page { width:100%; height:80px; }
  #main .visual .v_page .btn ul { right:25px; }

}

@media screen and (max-width:640px) {
  .wrap { padding:0 20px; }
  .page ul li a { font-size:14px; width:30px; height:30px; line-height:30px; }

  #sub { padding:0 0 90px; }

  .marginbody { margin:60px 0 -90px; }

  #sub h3 { font-size:26px; padding:25px 0 20px; margin:0 0 25px; border-bottom:4px solid #f1f1f1; }
  #sub h4.b { font-size:21px; padding:0 0 0 30px; margin:35px 0 10px; }
  #sub p.b20 { font-size:17px; line-height:25px; margin:0 0 10px; }
  #sub p.b20 br { display:none !important; }
  #sub p.b17 { font-size:15px; line-height:24px; }
  #sub p.b17 br { display:none !important; }
  #sub .visual .txt p { font-size:17px; }
  #sub .visual .txt h2 { font-size:47px; line-height:49px; }
  #sub .visual .wrap { height:340px; }
  #sub .visual .depth ul > li.depth1 > img { right:12px; height:7px !important; }
  #sub .visual .depth ul > li.depth1 > a { padding:0 0 0 10px; font-size:15px; }
  #sub .visual .depth ul > li > a { line-height:55px; }
  #sub .visual .depth { height:55px; }
  #sub .visual .depth ul > li.home a img { height:15px !important; margin:0 0 3px; }
  #sub .visual .txt h2 { font-size:43px; }

  #main .visual .txt2 p b br { display:block !important; }

  #main .curious .list ul li a { padding:15px 15px 50px; }
  #main .curious .list ul li a p { font-size:18px; }
  #main .curious .list ul li a span { font-size:15px; padding:7px 0 0; }
  #main .curious .list ul li a .btn { right:15px; bottom:15px; }

  #main .contents { padding:65px 0; }
  #main .contents .maintit { padding:0 0 40px; }
  #main .contents .maintit p { font-size:26px; }
  #main .contents .maintit span { font-size:16px; padding:4px 0 0; }

  #main .banner { height:420px; background-attachment:inherit; }
  #main .banner span { height:110px; }
  #main .banner .txt { padding:150px 0 0; }
  #main .banner .txt p { font-size:28px; }
  #main .banner .txt .nemo { margin:20px 0 0; }
  #main .banner .txt .nemo ul li { width:160px; line-height:50px; font-size:15px; }
  #main .banner .txt .nemo ul li:first-child { margin:0 20px 0 0; }
  #main .banner .box { padding:20px 0; }
  #main .banner .box a p { font-size:16px; line-height:26px; }
  #main .banner .box a .btn { font-size:14px; padding:15px 0 0; }

  #main .board .board0 .title strong { font-size:24px; padding:0 0 12px; }
  #main .board .board0 .title .btn a { line-height:37px; font-size:13px; }
  #main .board .notice ol li a { padding:15px; }
  #main .board .notice { margin:0 0 40px; }
  #main .board .now ol li { padding:0 4% 10px; height:inherit; }
  #main .board .now ol li a p { font-size:16px; line-height:22px; height:66px; }
  #main .board .now ol li a span { padding:15px 0 0; }

  /* #main .visual .slide_box .box { height:600px; } */
  #main .visual .slide_box { height:600px; }
  #main .visual .v_page { height:60px; }
  #main .visual .txt { left:20px; padding:0 20px 0 0; box-sizing:border-box; }
  #main .visual .txt p { font-size:32px; line-height:42px; }
  #main .visual .txt span { font-size:20px; padding:0 100px 0 0; }
  #main .visual .v_page .btn ul li a span { width:5px; height:5px; }

  #sub .visual .depth ul > li ol { top:56px; }
  #sub .visual .depth ul > li ol li a { font-size:14px; line-height:38px; padding:0 0 0 15px; }
}

@media screen and (max-width:480px) {
  #sub .visual .wrap { height:310px; }
  #main .visual .v_page { height:50px; }

  #main .banner { height:500px; }
  #main .banner .txt { padding:135px 0 0; }
  #main .banner .txt .nemo ul li { width:100%; box-sizing:border-box; margin:10px 0 0; }
  #main .banner .txt .nemo ul li:first-child { margin:0; }
  #main .banner .box a p { font-size:15px; line-height:23px; padding:0 20px; box-sizing:border-box; }
  #main .banner .box a p br { display:none !important; }

  #main .board .board0 .title { padding:0 2px; }
  #main .board .notice ol li a p { font-size:15px; padding:0 0 2px; }
  #main .board .notice ol li a span { font-size:13px; }
  #main .board .notice ol li a { padding:10px 12px; }
  #main .board .now ol li a p { font-size:17px; margin:4px 0 15px; }
  #main .board .now ol li a span { font-size:13px; }
}


@media screen and (max-width:360px) {
  .wrap { padding:0 15px; }
  #main .visual .txt p { font-size:27px; line-height:37px; }
  #main .visual .txt span { font-size:18px; }
  #main .visual .slide_box .box { height:500px; }
}




/* 아이콘 화질 */

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  #sub h4.b { background-image:url('../img/sub/icon_title@3x.png'); background-size:22px; }
}
