@charset "utf-8";

/* skip ----------------------------------------------*/
#accessibility {position:absolute; top:0; left:0; width:100%; z-index:9999;}
#accessibility a {font-size:14px; position:absolute; top:-9999px;}
#accessibility a:hover, #accessibility a:active, #accessibility a:focus {display:inline-block; top:0; width:100%; padding:10px 0; color:white; font-weight:bold; text-align:center; background-color:black;}

h3{margin-bottom:30px;font-size:30px}


/* 메인 상단 메뉴 */
.top-animate {
  background: #fff !important;
  top: 13px !important;
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}
.mid-animate {
  opacity: 0;
}
.bottom-animate {
  background: #fff !important;
  top: 13px !important;
  -webkit-transform: rotate(-225deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-225deg);
}
.top-menu,
.mid-menu,
.bottom-menu {
  width: 28px;
  height: 4px;
  border-radius: 10px;
  background-color: #fff;
}
.top-menu {
  top: 5px;
}
.mid-menu {
  top: 13px;
}
.bottom-menu {
  top: 21px;
}
.menui {
  background: #FFF;
  transition: 0.6s ease;
  transition-timing-function: cubic-bezier(0.75, 0, 0.29, 1.01);
  margin-top: 10px;
  position: absolute;
}
.menu-trigger {
  z-index: 999;
  position: fixed;
  display: block;
  /*padding: 9px;
  height: 32px;
  width: 32px;*/
  margin: 0px;
  top: 45px;
  right: 115px;
}
.menu-trigger span {color:#fff; font-size:1.2em;}
.menu-trigger i {display:inline-block; width:26px; height:33px; margin-left:10px; background:url('../images/main/menu_pic.svg') no-repeat center center; vertical-align:middle;}
.mobilenav {
  font-family: inherit;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 171, 102, 0.9);
  text-transform: uppercase;
}
.mobilenav li {
  list-style-type: none;
  text-align: center;
  padding: 10px;
  font-size: 220%;
  color: #fff;
  text-decoration: none;
  font-weight: 300;
  width: 100%;
}
.mobilenav li:last-child span {
  border-bottom: none;
}
.mobilenav li:hover {
  cursor: pointer;
}
.nav-label {
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
  display: block;
  width: 350px;
  margin: 0 auto;
  color:#fff;
}
.mobilenav li:first-child {
  margin-top: 60px;
}

#box #ui-1 {background:url('/html/images/main/mv1.jpg') no-repeat center center; background-size:cover; }
#box #ui-2 {background:url('/html/images/main/mv2-1.jpg') no-repeat center center; background-size:cover;}

#contorl {height:130px;width:28px ;right: 115px; ;top: 50%;margin-top: -75px;z-index: 9;position: fixed;}
#contorl span {display: block;width:28px;height:27px;margin:15px 0px; border-radius: 50%; cursor: pointer; background:url('../images/main/dot_off.png') no-repeat center center; }
#contorl span.on {background:url('../images/main/dot_on.png') no-repeat center center; }

#header {position:relative; z-index:10; }
#header .navbar-header {position:fixed; top:40px; left:115px; }
#header .navbar-header .logo {display:block; overflow:hidden; width:346px; height:45px; background:url('../images/logo.png') no-repeat; background-size:100% auto; text-indent:-9999em;}


.animation.animated-item-1 {
    -webkit-animation: fadeInUp 300ms linear 300ms both;
    animation: fadeInUp 300ms linear 300ms both;
}

.animation.animated-item-2 {
    -webkit-animation: fadeInUp 300ms linear 600ms both;
    animation: fadeInUp 300ms linear 600ms both;
}

.animation.animated-item-3 {
    -webkit-animation: fadeInUp 300ms linear 900ms both;
    animation: fadeInUp 300ms linear 900ms both;
}

/* 메인 */
.container .ad_txt {padding-bottom:105px; font-size:45px; font-weight:400; text-align:center; color:#fff }
.container .ad_txt strong {font-weight:700; color:#fff}

.ui-1 {position:relative; display:table;}
.ui-1 .boxs {display:table-cell; width:100%; height:100%; vertical-align:middle;}
.ui-1,.ui-2{background: #00000040;}
.ui-1 .ad_txt {color:#fff;}
.ui-1 .pic-btns {width:1000px; margin:0 auto;}
.ui-1 .pic-btns ul li {float:left; width:20%; padding:0 7px;}
.ui-1 .pic-btns ul li a {display:block; padding-top:40px; min-height:225px; color:#fff; text-align:center; background:rgba(0,0,0, 0.2); border-radius:20px;}
.ui-1 .pic-btns ul li a:hover {color:#ffff00;}
.ui-1 .pic-btns ul li a i {display:block; width:96px; height:88px; margin:0 auto 5px auto;}
.ui-1 .pic-btns ul li a strong {display:block; font-size:30px; font-weight:700;}
.ui-1 .pic-btns ul li a span {display:block;  font-size:20px; }

.ui-1 .pic-btns ul li a i.pic1 {background:url('../images/main/ui1_pic1_off.png') no-repeat center center; background-size:100% auto;}
.ui-1 .pic-btns ul li a i.pic2 {background:url('../images/main/ui1_pic2_off.png') no-repeat center center; background-size:100% auto;}
.ui-1 .pic-btns ul li a i.pic3 {background:url('../images/main/ui1_pic3_off.png') no-repeat center center; background-size:100% auto;}
.ui-1 .pic-btns ul li a i.pic4 {background:url('../images/main/ui1_pic4_off.png') no-repeat center center; background-size:100% auto;}
.ui-1 .pic-btns ul li a i.pic5 {background:url('../images/main/ui1_pic5_off.png') no-repeat center center; background-size:100% auto;}

.ui-1 .pic-btns ul li a:hover i.pic1 {background:url('../images/main/ui1_pic1_on.png') no-repeat center center; background-size:100% auto;}
.ui-1 .pic-btns ul li a:hover i.pic2 {background:url('../images/main/ui1_pic2_on.png') no-repeat center center; background-size:100% auto;}
.ui-1 .pic-btns ul li a:hover i.pic3 {background:url('../images/main/ui1_pic3_on.png') no-repeat center center; background-size:100% auto;}
.ui-1 .pic-btns ul li a:hover i.pic4 {background:url('../images/main/ui1_pic4_on.png') no-repeat center center; background-size:100% auto;}
.ui-1 .pic-btns ul li a:hover i.pic5 {background:url('../images/main/ui1_pic5_on.png') no-repeat center center; background-size:100% auto;}


.ui-2 {position:relative; display:table;}
.ui-2 .boxs {display:table-cell; width:100%; height:100%; vertical-align:middle;}
.ui-2 .boxs .menu-trigger span {color:#282828;}
.ui-2 .boxs .menu-trigger i {background:url('../images/main/menu_pic_b.png') no-repeat center center; }
.ui-2 .bbs-con {width:1000px; margin:0 auto;}
.ui-2 .bbs-con .white-box {margin:10px 0; padding:15px; border-radius:20px;  background:rgba(255,255,255, 0.7); }
.ui-2 .bbs-con .white-box h2 {
	display:inline-block;
	margin-bottom:10px;
	font-size:24px;
	font-weight:500;
	color:#002e73;
	background:url('/common/images/more.png');
	}
.ui-2 .bbs-con .white-box span {
	display:inline-block;
	float:right;
	}
.ui-2 .bbs-con .white-box ul li {position:relative; overflow:hidden; padding:5px 0; }
.ui-2 .bbs-con .white-box ul li .txt {font-size:14px; color:#000; overflow:hidden; display:block;  padding:0px 90px 0px 0px; line-height:20px; height:20px; text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp:1; /* 줄 */-webkit-box-orient: vertical;word-wrap:break-word; }
.ui-2 .bbs-con .white-box ul li .date {position:absolute; top:-2px; right:0px;line-height: 35px; }


.ui-3 {position:relative; display:table;}
.ui-3 .boxs {display:table-cell; width:100%; height:100%; vertical-align:middle;}
.ui-3 .boxs .menu-trigger span {color:#282828;}
.ui-3 .boxs .menu-trigger i {background:url('../images/main/menu_pic_b.png') no-repeat center center; }
.ui-3 .pic-btns {width:1000px; margin:0 auto;}
.ui-3 .pic-btns ul li {float:left; width:25%; padding:0 7px;}
.ui-3 .pic-btns ul li a {display:block; min-height:240px; padding-top:40px; font-size:24px; font-weight:500; color:#181818; text-align:center; border-radius:20px;}
.ui-3 .pic-btns ul li a.color_btn1 {background:rgba(255,255,255,1);}
.ui-3 .pic-btns ul li a.color_btn2 {background:rgba(255,255,255,1);}
.ui-3 .pic-btns ul li a.color_btn3 {background:rgba(255,255,255,1);}
.ui-3 .pic-btns ul li a.color_btn4 {background:rgba(255,255,255,1);}
.ui-3 .pic-btns ul li i {display:block; width:158px; height:106px; margin:0 auto 35px auto;}
.ui-3 .pic-btns ul li i.pic1 {background:url('/html/images/main/icon-777.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic2 {background:url('/html/images/main/icon-tire.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic3 {background:url('/html/images/main/icon-question.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic4 {background:url('/html/images/main/icon-map.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic5 {background:url('/html/images/main/icon-punk.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic6 {background:url('/html/images/main/icon-bulge.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic7 {background:url('/html/images/main/icon-change.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic8 {background:url('/html/images/main/icon-event.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic1:hover {background:url('/html/images/main/icon-777-over.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic2:hover {background:url('/html/images/main/icon-tire-over.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic3:hover {background:url('/html/images/main/icon-question-over.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic4:hover {background:url('/html/images/main/icon-map-over.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic5:hover {background:url('/html/images/main/icon-punk-over.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic6:hover {background:url('/html/images/main/icon-bulge-over.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic7:hover {background:url('/html/images/main/icon-change-over.png') no-repeat center center; background-size:100% auto;}
.ui-3 .pic-btns ul li i.pic8:hover {background:url('/html/images/main/icon-event-over.png') no-repeat center center; background-size:100% auto;}



.scroll-guide {position:absolute; bottom:20px; left:50%; margin-left:-26px; display:block; width:52px; height:110px; background:url('../images/main/intro-scroll.png')/* background:url('../images/main/scroll_pic.png') */ no-repeat center center; }
.scroll-guide-up {position:absolute; bottom:20px; left:50%; margin-left:-26px; display:block; width:52px; height:110px; background:url('../images/main/intro-scroll-up.png')/* background:url('../images/main/scroll_pic.png') */ no-repeat center center; }

/* 서브 */
/* .row-15 [class*="col-"] {padding-right:0px; padding-left:0px;}*/
.subTop{margin-top:90px;}
#wrap {position:relative; }

.subMenu {padding:20px 0 20px 0; height:50px; /*border-bottom:1px solid rgba(255, 255, 255, 0.32);background:rgba(0,0,0,0.3);*/ }
.subMenu .navbar-header {position:relative; margin:0; z-index:101;}
.subMenu .navbar-brand.logo {display:block; overflow:hidden; width:268px; height:31px; background:url('../images/sub/logo.png') no-repeat; background-size:100% auto; text-indent:-9999em;}

.subMenu:hover .navbar-brand.logo {background:url('../images/sub/logo_black.png') no-repeat; }
.subMenu .navbar-brand.logo:hover { background:url('../images/sub/logo.png') no-repeat; }

/*.navbar-inverse {padding:20px 0 20px 0;}
.navbar-inverse .navbar-brand.logo {display:block; overflow:hidden; width:268px; height:31px; background:url('../images/sub/logo.png') no-repeat; background-size:100% auto; text-indent:-9999em;}
.navbar-inverse .navbar-nav > li {padding:0 30px; background:url('../images/sub/menu_bar.png') no-repeat right 14px; }
.navbar-inverse .navbar-nav > li:last-child {background:none;}
.navbar-inverse .navbar-nav > li > a {padding:10px 10px; font-size:17px; color:#fff;}
*/
.sticky_header.is-sticky {
	/*-webkit-animation: 0.4s ease-in-out 0s normal both 1 running fadeInDown;
	animation: 0.4s ease-in-out 0s normal both 1 running fadeInDown;*/
	background:#fff;
	left: 0;
	position: fixed;
	top: 0;
	transition: 0.5s ease-in-out 0s;
	width: 100%;
	z-index:100;
	min-height:70px;	}
.sticky_header.is-sticky  .navbar-brand.logo {background:url('../images/sub/logo_black.png') no-repeat; }
.responsive-menu {/*width:1200px;height:100%;margin:0 auto;padding-top:0px;*/}
.sideLnb h2 {display:none;}
.sideLnb .closeBtn {display:none;}
.gnbDp-1 a { display:none; }
.gnbDp-1:before,
.gnbDp-1:after{display:table;content:" ";}
.gnbDp-1:after {clear:both;}
.pcLnb {overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:70px; z-index:100; background:rgba(0,0,0,0.3);/*border-bottom:1px solid #dbdbdb;*/}
.pcLnb a {display:block;}
.pcLnb  > div {width:1200px; margin:0 auto; padding-left:350px; }
.pcLnb  > div > ul {position:relative; width:100%; }
.pcLnb  > div > ul > li {position:relative; float:left;width:22%;line-height:70px;}
.pcLnb  > div > ul > li:first-child {width:34%;}
.pcLnb  > div > ul > li > a {display:block; line-height:70px; font-size:1.26em; font-weight:500; text-align:center; color:#fff; }
.pcLnb  > div > ul > li > a span {-o-transition:color .3s ease;	-webkit-transition:color .3s ease; display:block; position:relative; line-height:70px; transition:color .3s ease;white-space:nowrap;}
.pcLnb  > div > ul > li > a span:after {-o-transition:width .2s ease;-webkit-transition:width .2s ease;background:#22ac38;content:"";height:3px;left:0;position:absolute;bottom:0px;transition:width .2s ease;width:0px;}
.pcLnb  > div > ul > li.on >a,
.pcLnb  > div > ul > li > a:hover,
.pcLnb  > div > ul > li > a:focus {text-decoration:none; color:#22ac38; }
.pcLnb  > div > ul > li.on >a span:after,
.pcLnb  > div > ul > li > a:hover span:after,
.pcLnb  > div > ul > li > a:focus span:after {width:100%;}
.pcLnb  > div > ul > li > div {padding:10px 0; }
.pcLnb  > div > ul > li > div > ul {}
.pcLnb  > div > ul > li.on > div {/*background:#fafafa;*/}
.pcLnb  > div > ul > li > div > ul > li {line-height:28px; margin:7px 0;}
.pcLnb  > div > ul > li > div > ul > li > a {padding:0px 13px; font-size:1.06em; text-align:center; }
.pcLnb  > div > ul > li > div > ul > li > a:hover,
.pcLnb  > div > ul > li > div > ul > li > a:focus{color:#22ac38;}


.pcLnb:hover {background:#fff; }
.pcLnb:hover > div > ul > li > a {color:#282828;}
.sticky_header.is-sticky .pcLnb {background:#fff; border-bottom:1px solid #ddd;}
.sticky_header.is-sticky .pcLnb  > div > ul > li > a {color:#282828;}

.allmenu {display:none;}

#sub-visual {position:relative; height:360px; padding-top:210px;}
#sub-visual:before {position:absolute; top:0px; left:0px; content:""; display:block; width:100%; height:100%; background:url('../images/sub/top_mask_bg.png') repeat-x top left;  z-index:1;}
#sub-visual.bg1 {background:url('../images/sub/sub_visual1.png') no-repeat center center; background-size:contain ;}
#sub-visual.bg2 {background:url('../images/sub/sub_visual2.png') no-repeat center center; background-size:cover !important;}
#sub-visual.bg3 {background:url('../images/sub/sub_visual3.png') no-repeat center center; background-size:cover !important;}
#sub-visual.bg4 {background:url('../images/sub/sub_visual4.png') no-repeat center center; background-size:cover !important;}

#sub-visual h2 {position:relative; font-size:45px;  font-weight:500; color:#f39700; text-shadow:2px 2px 4px rgba(12, 12, 12, 0.62); z-index:5;}
#sub-visual .ad-txt {position:relative; font-size:22px;  font-weight:300; color:#fff; text-shadow:2px 2px 4px rgba(12, 12, 12, 0.62); z-index:5;}

#page-navi {position:relative; height:50px; margin-bottom:40px; border-top:1px solid #dcdcdc;  border-bottom:1px solid #dcdcdc; background-color:#eee;}
#page-navi  ul li {float:left; padding:0 20px;  line-height:50px; }
#page-navi  ul li:first-child {border-right:1px solid #dcdcdc; border-left:1px solid #dcdcdc;}
#page-navi  ul li .home {display:inline-block; width:19px; height:17px; background:url('/common/images/sub/home_icon.png') no-repeat; text-indent:-9999em; vertical-align:middle; }
#page-navi  ul li:nth-child(3) {background:url('/common/images/sub/left_menu_arrow.png') no-repeat left 19px; }

#sub-contents {overflow:hidden; position:relative; }

#leftMenu {float:left; width:250px;}
#leftMenu h2 {padding:60px 0 20px 0; margin-bottom:20px;  font-size:24px; line-height:1.0em; border-bottom:2px solid #009944;/*  background:url('../images/sub/left_tit_bg.png') no-repeat left top;  */}
#leftMenu ul {margin-bottom:70px;}
#leftMenu ul li {border-bottom:1px solid #dcdcdc;}
#leftMenu ul li a {
	display:block;
	padding:15px 10px;
	font-size:16px;
	font-weight:400 !important;
	color:#222;
	background:url('../images/sub/left_menu_arrow.png') no-repeat 95% 22px;
	}
#leftMenu ul li a b {
	font-weight:400 !important;
	color:#222;
	}
leftMenu ul li a.hover {
	font-weight:400 !important;
	color:red;
	}
#leftMenu ul li a.active {background:#eee url('../images/sub/left_menu_arrow.png') no-repeat 95% 22px;}

#content {float:right; width:900px; padding:50px 0; }

.sub-tit {font-size:26px; color:#009944;}

.sbu-con {position:relative; padding:45px 0 0 0;}

/* footer */
footer {clear:both; padding:30px 0 35px 30px; background-color:#eee;}
footer .footer_logo {display:block; overflow:hidden; width:214px; height:37px; background:url('/html/images/logo.svg') no-repeat; background-size:100% auto; text-indent:-9999em;}

@media (min-width: 547px){
.footer_m{display:none;}
#c1 {margin-left:13px;}
#t {font-weight:bold;}
} 
@media (max-width: 546px) {
.footer_p{display:none; }
#c1 {display: inline; margin-left:13px;}
#c2 {display: block; margin:0 0 15px 60px;}
#c3 {display:inline-block;}
#t {font-weight:bold;}
.line {border-top:1px solid #fff; padding-top:15px; margin:0 35px 10px 0;}
.col-md-8 cite {font-size:11px;}
.footer_m .col-md-8 .demoSpan1{height:15px; width:15px; display:inline; position:relative; margin-left:7px;} 
.demoSpan1{width:20px; height:20px; display:block;}
.demoSpan1:before{content:''; height:0px; width:0px; display:block; position:absolute; top:0px; left:0px; border:8px solid transparent; border-bottom-color:#333; border-top:0; margin-top:3px;}
.demoSpan1:after{content:''; height:6px; width:10px; display:block; position:absolute; top:7px; left:3px; border:3px #333 solid; border-top-width:3px; border-bottom:0; margin-top:3px;}
}