html{font-size:20px;}
body{font-size:1rem;}

.tablet{display:none;}
.mob{display:none;}

h2{font-size:2.5rem;}
h3{font-size:2rem;}
h4{font-size:1.6rem; font-weight: 500; line-height: 1.2; margin-bottom: 1.5rem;}
h5{font-size:1.3rem; }


/*탑메뉴*/
#wrap{ position:relative; overflow:hidden;}
#wrap img { border:none; }
#wrap i{vertical-align:middle;}

#header{position:relative; width:100%; z-index:100;-webkit-transition:all .3s;transition:all .3s; background: #fff; z-index: 100;}
#header h1{position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:100;}
#header h1 img,
#footer h3 img{width:16rem;}
#header .header_inner{position:relative; width:1400px; margin:0 auto; height:4.3rem; }
#header .header_inner:after{content:""; display:block; clear:both;}

/*탑메뉴*/
#header .header_inner #nav {text-align:right; margin-right:4.3rem;}
#header .header_inner #nav ul {clear:both;  position:relative; box-sizing:border-box;}
#header .header_inner #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top;position:relative;}
#header .header_inner #nav ul li {position:relative; }
#header .header_inner #nav > ul > li:after{position: absolute; content: ''; display: block; width: .4rem; height: .4rem; border-radius: 50%; overflow: hidden; right:0; top: 50%; transform:translateY(-50%); }
#header .header_inner #nav > ul > li:nth-of-type(1):after{background-color: rgb(219, 20, 15);}
#header .header_inner #nav > ul > li:nth-of-type(2):after{background-color: rgb(255, 204, 0);}
#header .header_inner #nav > ul > li:nth-of-type(3):after{background-color: rgb(0, 0, 255);}

#header .header_inner #nav > ul > li:last-child:after{background: none;}
#header .header_inner #nav ul li  a{text-align:center; font-weight: 500; font-size:1.25rem; display:inline-block; height:4.3rem; line-height:4.3rem; text-transform: uppercase; position:relative;margin:0 2.4rem;}
#header .header_inner #nav ul li  a strong{font-weight: 600; }
#header .header_inner #nav ul li.active a{color:#00a8ff;}
#header .header_inner #nav ul li.active a:before{width:100%; left:0%;}


/*탑메뉴 2차*/
#header .header_inner #nav ul li ul {z-index: 100; display:none; position: absolute; width:100%; height: 14rem;  left:0; top:4.3rem; box-sizing:border-box; padding:2rem 0;   border-top:none; text-align:center; background-color:#f5f5f7;}
#header .header_inner #nav ul li ul li {display:block;margin:0; margin-bottom:1rem; line-height:1; padding:0 1rem;}
#header .header_inner #nav ul li ul li a{display:block;  font-size:0.95rem; margin:0;  height:auto; font-weight:normal; line-height:1.3;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;	-o-transition: all 0.3s ease; transition: all 0.3s ease; }
#header .header_inner #nav ul li ul li a:after{position: absolute; display : block; content:''; width: 0%; height: 1px; bottom: -.25rem; left: 0; background-color: #00A8FF; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;	-o-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .header_inner #nav ul li ul li a:hover{position: relative; color:#00A8FF; }
#header .header_inner #nav ul li ul li a:hover:after{width: 100%;}
#header .header_inner #nav ul li.active ul li a strong{font-weight:normal;}

.bg_box{margin: 0 auto !important; display:none; position: absolute; width: 100%; height: 14rem; top:4.3rem; z-index:10; box-sizing:border-box;background-color:#f5f5f7; box-sizing: border-box; box-shadow:3px 15px 15px rgba(0,0,0,0.1);}
.bg_box .box_img{width:1400px; margin: 0 auto; height: 100%;  position:relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #fff; z-index:0; background-color:#f5f5f7; padding-left:1rem;}
.bg_box .box_img:after{position: absolute; content:''; display : block; top:0; left: -26%; width: 818px; height: 100%; background: url("/images/default/main/tsm_bg.jpg") no-repeat center top;  z-index:-1;}
.bg_box .box_img h4{margin-bottom: 1rem;}
.bg_box .box_img p{font-weight: 300; line-height: 1.5; font-size:0.75rem;}


/*사이트맵 버튼*/
#header .btn-gnb-menu{position:absolute; right:0; top:0; width:4.3rem; height:4.3rem; background: #00a8ff; cursor:pointer; z-index:9999;text-align:center;}
#header .btnAll {position:relative; width:1.5rem; height:1.5rem; top:50%; transform:translateY(-40%);outline: none; z-index:9999;}
#header .btnAll span { display: block; width: 100%; height: 0.15rem; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
#header .btnAll > span:nth-child(1) { top: 0; right:0;}
#header .btnAll > span:nth-child(2) { top: 0.5rem; right:0; width:1.1rem;}
#header .btnAll > span:nth-child(3) { top: 1rem; right:0; width:1.4rem;}
#header.open .btn-gnb-menu{display:block; background: #fff;}
#header.open .btnAll > span{background-color: #00a8ff;}
#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;}
#header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;}
#header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;}


/*사이트맵*/
#header #navi{background:#fff; position:fixed; right:-100%; top:0; width:100%; height:100%; padding-top:0;  z-index:100; transition:right 0.45s;}
#header.open #navi{transition:right 0.45s; right:0px;}
#menuAll h3{text-align: center; font-size:1.6rem; font-weight:300; padding-top:6rem;  line-height:1.5; margin-bottom:4rem; color:#111;}
#menuAll h3 em{display:block;color:#00a8ff; font-weight:500;}
#menuAll .mobile_top {width:72%; height:100%;position:relative; display: flex; flex-direction: row; flex-direction: column;}
#menuAll .mobile_top .mbtop{display: flex; flex-direction: row; justify-content: center;padding-left:7rem;}
#menuAll .mobile_top .mbtop > li > a{position:relative;}
#menuAll .mobile_top .mbtop > li > a:after{content: ""; width: 23px;height: 2px;background: #59514e;position: absolute;left: 0;top: 3.5rem}
#menuAll .mobile_top ul li{flex-basis: 25%; }
#menuAll .mobile_top ul li:last-child{padding-right:0rem;}
#menuAll .mobile_top ul li > a{display:block; font-size:1.3rem; font-weight:500;  padding:1rem 0;width:100%; ;position:relative;}
#menuAll .mobile_top ul li ul{margin-top:2rem;}
#menuAll .mobile_top ul li ul li{float:none; width:100%; position:relative; margin-top:20px; margin-left:0;}
#menuAll .mobile_top ul li ul li:first-child{margin-top:0;}
#menuAll .mobile_top ul li ul li a{ display:block; ;font-weight:300; color:#333; background:none; text-align: left; padding:0;color:#666;}

#menuAll .mobile_top ul li ul li a:hover{color:#FE8182;}
#menuAll .mobile_top ul li ul li ul{margin:20px 0 30px;}
#menuAll .mobile_top ul li ul li ul li:before{width:4px; height:4px; border-radius:50%; top:8px;}
#menuAll .mobile_top ul li ul li ul li a{color:#777; font-weight:400;}
#menuAll .menubg{float:left;background: url("/images/default/content/bg_pattern.png") no-repeat center top;background-size:cover;height:100%;width:21%;position:relative;float:left;
animation: AnimationName 10s ease infinite;
}
/*배경 에니메이션*/
-webkit-animation: AnimationName 16s ease infinite;
 -moz-animation: AnimationName 16s ease infinite; 
-o-animation: AnimationName 16s ease infinite; 
animation: AnimationName 16s ease infinite; 

@-webkit-keyframes AnimationName { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%} 
} 

@-moz-keyframes AnimationName { 
0%{background-position:0% 50%}
 50%{background-position:100% 50%} 
100%{background-position:0% 50%} 
}

 @-o-keyframes AnimationName {
 0%{background-position:0% 50%} 
50%{background-position:100% 50%} 
100%{background-position:0% 50%} 
}

 @keyframes AnimationName { 
0%{background-position:0% 50%} 
50%{background-position:100% 50%} 
100%{background-position:0% 50%}
 }
#menuAll .sns_mobile{display: none;}
#menuAll .menubg:after{content : ""; display : block; position : absolute; right :-1rem; top:0; height: 12.85rem; width:14rem;background: url("/images/default/content/bg_potin01.png") no-repeat center top; }
#menuAll .menubg:before{content : ""; display : block; position : absolute; left :0rem; bottom:0; height: 12rem; width:16.4rem;background: url("/images/default/content/bg_potin02.png") no-repeat center top; }
#menuAll .menubg h3{color:#fff;vertical-align:middle;top:50%;left:50%;transform: translate(-50%, -50%);position:absolute; font-family: 'Montserrat', serif;}


/*비주얼*/
#visual {width:100%; z-index: 0; position:relative; overflow:hidden;}
#visual .bxslider {z-index:1;}
#visual .bxslider li {position:relative;width:100%; height:28.75rem; box-shadow:inset 0 10px 10px rgba(0, 0, 0, .15);}
#visual .bxslider li .ptext {display: flex; flex-direction: column; justify-content: center; align-items: center; position:relative; margin: 0 auto; font-size:1.15rem; line-height:1.3;  box-sizing:border-box; z-index:1; color:#fff;  width:100%; height: 100%; text-align:center; text-shadow:1px 5px 10px rgba(0, 0, 0, 0.5);}
#visual .bxslider li .ptext h2{font-weight: 600; line-height: 1.5; color: #fff; margin: 1.5rem 0 3.5rem;}
#visual .bxslider li .ptext h2 em{color: #08c2ff;}

#visual .bxslider li .ptext .text{-webkit-transition:opacity 0.7s,-webkit-transform 0.7s;transition:opacity 0.7s,-webkit-transform 0.7s;-o-transition:transform 0.7s, opacity 0.7s;transition:transform 0.7s,opacity 0.7s;transition:transform 0.7s,opacity 0.7s,-webkit-transform 0.7s;-webkit-transform:translate(0, 50px);-ms-transform:translate(0, 50px);transform:translate(0, 50px);opacity:0}
#visual .bxslider li.active-slide .ptext .text{-webkit-transition-delay:0.4s;-o-transition-delay:0.4s;transition-delay:0.4s;-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0);opacity:1}

#visual .bx-wrapper .bx-controls{position: absolute; left: 50%; transform: translateX(-50%); width: 15rem; height: 2rem; bottom: 4rem; display: flex; flex-direction: row; justify-content: center; align-items: center;}

#visual .bx-controls-direction{float: left; height: 2rem;}
#visual .bx-controls-direction a {display:inline-block; width:.45rem ;height:.9rem;z-index:11; bottom:0; opacity:0.8;}
#visual .bx-controls-direction .bx-prev { background:url('/images/default/main/vl.png') no-repeat; background-size: .45rem .9rem; left:0; bottom: .1rem;}
#visual .bx-controls-direction .bx-next { background:url('/images/default/main/vr.png') no-repeat; background-size: .45rem .9rem; right:0; bottom: .1rem;}
#visual .bx-controls-direction a:hover{opacity:1;}

#visual .bx-wrapper .bx-pager,
#visual .bx-wrapper .bx-controls-auto{position: relative; display: flex; flex-direction: row; align-items: center; bottom: 8px;} 

#visual .bx-wrapper .bx-pager{margin-left:1rem; right:revert;}
#visual .bx-wrapper .bx-pager.bx-default-pager{padding-top: 0; margin-right: 0;}
#visual .bx-wrapper .bx-pager.bx-default-pager a {width:3.5rem; height:.15rem; border-radius:.1rem; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; margin:0 .2rem; background:#fff; opacity: 0.8;}
#visual .bx-wrapper .bx-pager.bx-default-pager a.active { width:3.5rem; height:.15rem; border-radius:.1rem; background-color:#08c2ff; opacity: 1;}

#visual .bx-wrapper .bx-controls-auto{width: 100%; margin-left: .5rem;}
#visual .bx-wrapper .bx-controls-auto .bx-start{background:url('/images/default/main/start.png') no-repeat top center; background-size: .45rem .6rem;}
#visual .bx-wrapper .bx-controls-auto .bx-stop{background:url('/images/default/main/stop.png') no-repeat top center; background-size: .45rem .6rem;}
#visual .bx-wrapper .bx-controls-auto a.active{display: none;}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#visual .bx-wrapper .bx-pager{transform: translateX(5%);}
	#visual .bx-wrapper .bx-controls-auto{transform: translateX(75%);}
}



/*검색*/
.search{position: absolute; left: 50%; transform: translateX(-50%); bottom: 7rem;}
.typeahead__field{margin: 0 auto; width: 25rem; display: flex; justify-content: space-between; align-items: center; background-color: rgba(255, 255, 255, 0.4);}
search_area{overflow: hidden; position: relative;}
.search_area label{display:none;}
.search_area input.insearch{width: 60%; display: inline-block;  margin: 0;  height:2rem; line-height:2rem;  border: none; background: transparent; color: #4B4F58; font-weight: 400; box-sizing:border-box; }
.typeahead__field .inbtn{margin: 0; border: none; color: #000; margin: 1rem; text-shadow: none;}
.typeahead__field .inbtn span{position: relative; padding: 0 1rem; line-height: 1; }
.typeahead__field .inbtn span:after{position: absolute; content: ''; display: block; width: 2px; height: 70%; left:0; top:60%; transform: translateY(-60%); background:#595858;}


/* 탭메뉴 */
.tab_menu{width:1400px; margin:0 auto; margin-bottom:5.5rem; }
.tab_menu ul{overflow: hidden; display: table; position: relative; width: 100%; height: 2.7rem; display: flex; flex-direction: row; justify-content: center; }
.tab_menu ul li{width:10rem; height: 2.7rem; text-align: center; vertical-align: top; }
.tab_menu ul li a{ display: block;  height: 2.6rem; border: 1px solid #ddd;   border-left: 0; background-color: #fff; color: #666; line-height: 2.6rem; vertical-align: top;    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.tab_menu ul li.on a{position: relative; background:#000; line-height: 2.4rem; border: 2px solid #000; border-bottom: 0; color: #fff;}
.tab_menu ul li:first-child a {border-left: 1px solid #ddd;}
.tab_menu ul li.on:first-child a {border-left: 2px solid #000;}
.tab_menu ul li strong{font-weight:500;}


/*컨텐츠*/
#container{margin:0; padding:0; position:relative; z-index:0; clear:both; text-align: center;}
#container > div:nth-of-type(odd){background: #f3f4f9;}
#container .inn{width:1400px; margin:0 auto; position:relative; line-height:1.3;padding: 3rem 0; box-sizing: border-box; line-height: 1.4;} 
#container .inn .intxt h3{font-weight: 500; margin-bottom: .6rem;}
#container .inn .intxt p b{font-weight: 500;}
#container img{vertical-align:middle;}


/*사업안내*/
#container .cts1{overflow:hidden; width: 100%;}
#container .cts1 .inn{display: flex; justify-content: flex-start;}
#container .cts1 .inn .intxt{width: 30%; text-align: left;}
#container .cts1 .inn .info_box{width: 70%;}
#container .cts1 .inn .info_box li{width: 20%;display:inline-block;padding-top:20%;position:relative;margin-right:5%}
#container .cts1 .inn .info_box li:last-child{margin-right:0;}
#container .cts1 .inn .info_box li div{position: absolute;left: 0;top: 0;right: 0; bottom: 0; border-radius: 50%; font-size: 1rem; color: #fff; display: flex;align-items: center;justify-content: center;flex-direction: column;}
#container .cts1 .inn .info_box li:nth-child(1) div{ background: #f9c65b; }
#container .cts1 .inn .info_box li:nth-child(2) div{ background: #f7aff8; }
#container .cts1 .inn .info_box li:nth-child(3) div{ background: #b0e86b; }
#container .cts1 .inn .info_box li:nth-child(4) div{ background: #68cdfb; }
#container .cts1 .inn .info_box li a{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;}
#container .cts1 .inn .info_box li a img{max-width: 3.5rem;}
#container .cts1 .inn .info_box li:hover a img{-webkit-transition: all .8s ease; transition: all .8s ease;}
#container .cts1 .inn .info_box li:hover a img{transform: rotateY(360deg);-moz-transform: rotateY(360deg);-webkit-transform: rotateY(360deg);-ms-transform: rotateY(360deg);}
#container .cts1 .inn .info_box li div p{margin-top:1rem;}
/*자료실 공지사항*/
#container .board{width:100%;}
#container .board{margin-left:0;}
#container .board ul{ display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; }
#container .board li{width: 31%; margin-right: 3.5%; text-align: left;}
#container .board li:nth-of-type(3n){margin-right: 0;}

#container .board li{border:1px solid #C6C6C6; margin-top:1rem; padding: 1rem; background: #fff; box-shadow: 0 .2rem .7rem rgb(0 0 0 / 20%);} 
#container .board li a{width: 100%; /*height: 100%;*/ display: block;}
#container .board li a .title_box{display: flex; flex-direction: row; align-items: center; justify-content: center; padding: .5rem; border-bottom: 2px solid #000;}
#container .board li a .title_box .b_title{display: inline-block;text-overflow:ellipsis; /*overflow: hidden;*/ text-overflow: ellipsis;display: -webkit-box;
-webkit-line-clamp: 1; /*-webkit-box-orient: vertical;word-wrap:break-word;*/ line-height: 2rem;height: 2rem; font-size:1.1rem; font-weight: 600; vertical-align:top;  text-align: left; width: calc(100% - 1.8rem);}
#container .board li a .title_box .go_img{text-align: right; width: 1.8rem; margin-left: .5rem;}
#container .board li a .title_box .go_img img{max-width: 1.65rem;}
#container .board li .con_box{padding: 1rem .5rem 2rem; line-height: 1.4; color: #595757;}
#container .board li .con_box .context{display: inline-block;text-overflow:ellipsis;overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp: 4; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.3em;height: 5.1em;}

#container .board li .date{position: absolute; left:1.5rem; bottom:1rem; }
#container .cts2,
#container .cts3{overflow:hidden;}


/*활동스케치*/
#container .cts4 .inn .board2_slide,
#container .cts4 .inn .next2, #container .cts4 .inn .prev2{display:none;}
#container .cts4 .inn .board2{display: block; width:100%;margin-left:0;}
#container .cts4 .inn .board2 ul{ display: flex; flex-direction: row; flex-wrap: wrap;justify-content: flex-start; align-items: stretch; }
#container .cts4 .inn .board2 li{width: 31%; margin-right: 3.5%; text-align: left; border:1px solid #C6C6C6; margin-top:2rem; box-shadow: 0 .2rem .7rem rgb(0 0 0 / 20%);}
#container .cts4 .inn .board2 li:nth-of-type(3n){margin-right: 0;}

#container .cts4 .inn .board2 li a{position: relative; width: 100%; height: 100%; display: block;}
#container .cts4 .inn .board2 li a .act_img{padding-top:100%;}
#container .cts4 .inn .board2 li a .act_txt{position: absolute; left:0; bottom:0; background: #fff; width: 100%; height: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s;}
#container .cts4 .inn .board2 li a .title_box{-webkit-transition: all 0.5s; transition: all 0.5s;}
#container .cts4 .inn .board2 li a .title_box .title{display: inline-block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 2rem;height: 2rem; font-size:1.1rem; font-weight: 500; vertical-align:top;}
#container .cts4 .inn .board2 li .gap{position: relative; width: 100%; height: 1px; display: block; padding: .5rem 0; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s;}
#container .cts4 .inn .board2 li .gap:after{position: absolute; content: ''; display: block; width: 30%; height: 1px; left:50%; top: 50%; transform: translate(-50%, -50%); background: #fff;}
#container .cts4 .inn .board2 li .date{font-weight: 300; line-height: 1.4; color: #727171; -webkit-transition: all 0.5s; transition: all 0.5s;}

#container .cts4 .inn .board2 li:hover a .act_txt{height: 100%; background: rgba(0, 0, 0, .4);}
#container .cts4 .inn .board2 li:hover a .act_txt .title_box,
#container .cts4 .inn .board2 li:hover a .act_txt .date{color: #fff;}
#container .cts4 .inn .board2 li:hover a .act_txt .gap{padding: 1rem 0; opacity: 1;}


/*배너*/
#container .cts5{overflow:hidden; width: 100%;}
#wrap .botBan{padding:0 3.5rem; position:relative; z-index:0;}
#wrap .botBan ul li{height:4rem; line-height:4rem; background: #fff; border: 1px solid #d2d2d2; box-sizing: border-box; border-radius: 5px;}
#wrap .botBan ul li div{height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
#wrap .botBan ul li div img{height: 2.5rem; max-width: 95%;}
#wrap .botBan .prev1, #wrap .botBan .next1{width:.85rem; height:1.45rem; top:50%;  transform:translateY(-50%); margin-top:0; z-index:1000;position:absolute; cursor:pointer; pointer-events: auto; -webkit-transition: all 0.25s; transition: all 0.25s; z-index:10; background: none;}

#wrap .botBan .prev1:after, #wrap .botBan .next1:after{position: absolute; display: block; font-weight: 500; width: 100%; height: 100%; line-height: -1; font-family: 'xeicon'; color: #949495; background: none; -webkit-transition: all 0.25s; transition: all 0.25s;}
#wrap .botBan .prev1:after{content:"\e93b"; left:0;}
#wrap .botBan .next1:after{content:"\e93e"; right:0;}
#wrap .botBan .prev1:hover:after, #wrap .botBan .next1:hover:after{color: #1cb7ff;}

#wrap .botBan .prev1.swiper-button-disabled{opacity:1;}
#wrap .botBan .next1.swiper-button-disabled{opacity:1;}


/*푸터*/
#footer{ clear:both; line-height:1.5;background-color:#313131; color:#fff; letter-spacing:0.02em; position:relative;}
#footer .copyright { width:1400px; margin:0 auto; padding:3.1rem 0;position:relative;  overflow:hidden;}
#footer h3{float:left;}
#footer .f_txt{float:right; text-align:right;}
#footer .copyright p{font-weight: 200;}
#footer .copyright p span{margin:0 .5rem; }
#footer .copyright .copy{margin-top:10px; color: #939998; font-weight:100;}


/********************************************************
■ 레이아웃 변경
********************************************************/
@media (max-width:1400px){
	#wrap{overflow-x:hidden;}	
	#header .header_inner{width:100%;}
	#header h1 img,
	#footer h3 img{width: 14rem;}


	/*탑메뉴*/	
	#header .header_inner{width:100%; padding:0 1rem;}
	#header .header_inner h1{left:1rem;}
	#header .header_inner #nav{margin-right:3.3rem;}
	#header .header_inner #nav ul li a {margin:0 2rem; font-size:1.05rem;}
	#header .header_inner #nav ul li ul li a{font-size:0.85rem;}


	/*탑메뉴 2차*/
	#menuAll .mobile_top .mbtop{padding-left:5rem;}
	#wrap .header_inner .sitemap p{right:10px;}


	/* 탭메뉴 */
	.tab_menu{width:100%; }
	

	/*컨텐츠*/
	#container .inn{width:100%; padding:3rem 2rem;}



	/*배너*/
	#container .cts5 .inn{width:100%; padding:3rem 1.5rem;}


	/*푸터*/
	#footer .copyright{width:100%; padding:2rem 1rem;}
}

@media (max-width:1200px){
	/*탑메뉴 2차*/
	.bg_box:after{width: 35%;}
	#container .cts1 .inn .info_box li a img{max-width:3rem;}
}




/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1030px){
	html{font-size:16px;}
    body{font-size:1rem}
	.web{display:none;}
    .tablet{display:block;}   
    
	/* 헤더 */
	#header h1 img,
	#footer h3 img{width: 14rem;}
	#header .header_inner {height: 4rem;}
	#header .header_inner #nav{display:none; }	
	#header .btn-gnb-menu{width:4rem; height:4rem;}
	


	/*사이트맵 버튼*/
	#header .btn-gnb-menu{display:block; position:absolute; right:0; bottom:0; width:4rem; height:4rem; cursor:pointer; z-index:9999; text-align:center; }
	#header .btnAll {position:relative; width:1.5rem; height:1.3rem; top:50%; transform:translateY(-50%);outline: none; z-index:9999;margin-top:0;}
	#header .btnAll span { display: block; width: 100%; height: 0.12rem; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
	#header .btnAll > span:nth-child(1) { top: 0;}
	#header .btnAll > span:nth-child(2) { top: 0.5rem; }
	#header .btnAll > span:nth-child(3) { top: 1rem;}
	#header.open .btn-gnb-menu{display:block; background: #00a8ff;}
	#header.open .btnAll > span{background-color: #fff;}
	#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;}
	#header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;}
	#header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;}


	/*전체메뉴*/
	#header #navi{background:#fff; position:fixed; right:-100%; top:0; width:100%; height:100%; padding-top:4rem; z-index:100; transition:right 0.45s;}
    #header.open #navi{transition:right 0.45s; right:0px;}
    #menuAll{display: block;}
    #navi h3{font-size:1.2rem; padding:1rem 0.75rem; line-height:1.3; color:#fff; font-weight:normal; margin:0; text-align: center;background: linear-gradient(to left, #8FD9FF, #00A8FF); }
    #navi h3 em{font-weight:600;color:#fff;}
	#menuAll .menubg{display:none;}
	#menuAll .mobile_top{width:100%; height:auto; flex-direction: column;}
	#menuAll .mobile_top .mbtop{padding:0;}
	#menuAll .mobile_top .mbtop{flex-direction: column;}
	#menuAll .mobile_top .mbtop > li > a:after{display:none;}
	
    /*1차*/
    #navi ul.mbtop {width:100%; margin:0; padding:0;}
    #navi ul.mbtop li {margin:0; float:none; width:100%; padding-right:0; border-bottom:1px #eeeeee solid; position:relative; }
	#navi ul.mbtop li:after{ content :"\e941"; display : block; position : absolute; right:1rem;  top:15px;font-family:'xeicon'; font-weight:500; }

    #navi ul.mbtop li a {padding:0; background: none; text-align:left; display:block; width:100%; padding:15px 1rem; box-sizing:border-box; font-size:1.15rem;  color:#262626;}
    #navi ul.mbtop li.open_li{ position:relative;}
    #navi ul.mbtop li.open_li:after{ content :"\e944";}
   
    /*2차*/
    #navi ul.mbtop li ul {display:none; float:none; background-color:#f5f6f7; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible;  padding:1rem 1rem; margin-top:0;}
    #navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box;  background: none; padding-left:0;}
    #navi ul.mbtop li ul li a {color:#262626; background:url(none);  height:auto; padding-left:0;  font-size:1.1rem; font-weight:500;}
    #navi ul.mbtop li ul li:after,
	#navi ul.mbtop li ul li:before{display:none;}

    /*3차*/
    #navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;}
    #navi ul.mbtop li ul li ul li {display:none;}

	#menuAll .mobile_top > ul > li:nth-child(2) > a{ background: #fff; }
	#menuAll .mobile_top > ul > li:nth-child(3) > a{ background: #fff; }
	#menuAll .mobile_top > ul > li:nth-child(4) > a{ background: #fff; }
	#menuAll .mobile_top > ul > li:nth-child(5) > a{ background: #fff; }

	#navi ul.mbtop li.open_li > a {color:#109BFC;}


	/* 서브메뉴 */	
	.tab_view{display:block; cursor:pointer;background:#00a8ff;; background-size:12px auto;padding:1rem .75rem; font-size:1.1rem; box-sizing:border-box; color:#fff; box-sizing:border-box; padding-left:0.75rem; font-weight:normal; position:relative; text-align: center;}
	.tab_view i{position:absolute; top:17px; right:1rem; }
	.tab_view.on{cursor:pointer; }
	.tab_view.on i{transform:rotateX(180deg);}
	.tab_view span{position:absolute; top:50%; right:1rem; margin-top:-4.5px; display:block; }
	.tab_view span img{width:13px;}
	.tab_view.on{cursor:pointer; }
	.tab_view.on span img{transform:rotateX(180deg);}
	.left_menu {position:relative;box-sizing:border-box; height:0; width:100%;}
	.left_menu ul{display:none; z-index:10;position:absolute;width:100%;left:0; top: 0; margin:0 auto; line-height:0; background:#f7f8f9;box-sizing:border-box; padding:1rem .75rem;box-shadow: 6px 6px 6px 0px rgba(25, 25, 25, 0.15);-webkit-box-shadow:   6px 6px 6px 0px rgba(25, 25, 25, 0.15);	-moz-box-shadow:  6px 6px 6px 0px rgba(25, 25, 25, 0.15); }
	.lm_bg .left_menu ul li {width:100% !important;border:none !important;height:auto; line-height:auto; margin-left:0; vertical-align:middle; box-sizing:border-box; }
	.lm_bg .left_menu ul li a {display:block; padding:.75rem .75rem;line-height: 1.0; height: auto;  font-weight:500; font-size:1.1rem; color:#888;text-transform:capitalize; }
	.lm_bg .left_menu ul li strong{ font-weight:500;} 
	.lm_bg .left_menu ul li.on a:before{display:none;}
	.lm_bg .left_menu ul li.on a{background:none; color:#00a8ff;}
	.lm_bg .left_menu ul li.on a:after{display:none;}
	.lm_bg .left_menu ul li:after {background: none;}


	/*비주얼*/
	#visual .bxslider li{height:36rem;}
	#visual .bx-wrapper .bx-controls{bottom: 7rem;}

	/*검색*/
	.search{bottom: 11rem;}


	/*컨텐츠*/
	#container .inn {padding: 3rem 1.5rem;}


	/*배너*/
	#container .cts5 .inn{width:100%; padding:3rem 1rem;}

}


/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
	html{font-size:15px;}
    body{font-size:1rem}
	
	.mob{display:block;}


	/*탑메뉴*/
	#wrap{font-size:1rem;}	
	#header h1{left: 1rem;}
	#header h1 img,
	#footer h3 img{max-width: 11rem;}
	#header .header_inner{height:3.6rem;}
	#header #navi{padding-top:3.6rem;}
	#header .btn-gnb-menu{width:3.6rem; height:3.6rem;}

	

	/*전체메뉴*/
	#menuAll .sns_mobile li a{height: 3.6rem; line-height: 3.6rem;}
	#menuAll .sns_mobile li:last-child a{line-height: 3.7rem;}
	

	/*비주얼*/
	#visual .bxslider li{height:32rem;}
	#visual .bx-wrapper .bx-controls{bottom: 5rem;}

	/*검색*/
	.search{bottom: 9rem;}


	/*컨텐츠*/
	#container .inn {padding: 3rem 1rem;}
	#container .inn .intxt{text-align: left;}
	#container .inn .intxt h3{position: relative; display: inline-block; padding-bottom: .2rem;}


	/*사업안내*/
	#container .cts1 .inn{flex-wrap: wrap;}
	#container .cts1 .inn .intxt{width: 100%; margin-bottom: 2rem;}
	#container .cts1 .inn .info_box{width: 100%; flex-wrap: wrap;}
	#container .cts1 .inn .info_box li{width: 22%;padding-top:22%;margin-right:3%;}
	#container .cts1 .inn .info_box li div{border-radius:100%;}
	#container .cts1 .inn .info_box li a img {max-width:2.5rem;}
	
	/*공지사항*/
	#container .board ul{flex-wrap: wrap;}
	#container .board ul li{width: 100%; margin-right: 0;}
	#container .board li .con_box{padding: 1rem 0;}
	#container .board li .con_box .context{display: none;}


	/*활동스케치*/	
	#container .cts4 .inn .board2{display:none;}
	#container .cts4 .inn .board2_slide{display:block; width:100%;}
	#container .cts4 .inn .board2_slide{margin-left:0;}
	#container .cts4 .inn .board2_slide ul{ display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; }
	#container .cts4 .inn .board2_slide li{width: 100%; text-align: left; border:1px solid #C6C6C6; margin-top:2rem;}
	#container .cts4 .inn .board2_slide li a{position: relative; width: 100%; height: 100%; display: block;}
	#container .cts4 .inn .board2_slide li a .act_img{padding-top:100%;}
	#container .cts4 .inn .board2_slide li a .act_txt{position: absolute; left:0; bottom:0; background: #fff; width: 100%; height: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s;}
	#container .cts4 .inn .board2_slide li a .title_box{-webkit-transition: all 0.5s; transition: all 0.5s;}
	#container .cts4 .inn .board2_slide li a .title_box .title{display: inline-block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
	-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 2rem;height: 2rem; font-size:1.1rem; font-weight: 500; vertical-align:top;}
	#container .cts4 .inn .board2_slide li .gap{position: relative; width: 100%; height: 1px; display: block; padding: .5rem 0; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s;}
	#container .cts4 .inn .board2_slide li .gap:after{position: absolute; content: ''; display: block; width: 30%; height: 1px; left:50%; top: 50%; transform: translate(-50%, -50%); background: #fff;}
	#container .cts4 .inn .board2_slide li .date{font-weight: 300; line-height: 1.4; color: #727171; -webkit-transition: all 0.5s; transition: all 0.5s;}

	#container .cts4 .inn .board2_slide li:hover a .act_txt{height: 100%; background: rgba(0, 0, 0, .4);}
	#container .cts4 .inn .board2_slide li:hover a .act_txt .title_box,
	#container .cts4 .inn .board2_slide li:hover a .act_txt .date{color: #fff;}
	#container .cts4 .inn .board2_slide li:hover a .act_txt .gap{padding: 1rem 0; opacity: 1;}



	#container .cts4 .inn .prev2, #container .cts4 .inn .next2{display:block; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid #727171; top: 95.5%/*IE10+*/; top: revert; bottom:1rem; margin-top:0; z-index:1000;position:absolute; cursor:pointer; pointer-events: auto; -webkit-transition: all 0.25s; transition: all 0.25s; z-index:10; background: none;}
	#container .cts4 .inn .prev2:after,  #container .cts4 .inn .next2:after{position: absolute; display: block; font-weight: 500; width: 100%; height: 100%; line-height: -1; font-family: 'xeicon'; color: #949495; background: none; -webkit-transition: all 0.25s; transition: all 0.25s;}
	#container .cts4 .inn .swiper-button-prev{left: 42%;}
	#container .cts4 .inn .swiper-button-next{right: 42%;}
	#container .cts4 .inn .prev2:after{content:"\e93b"; left:-1px; top: -1px;}
	#container .cts4 .inn .next2:after{content:"\e93e"; right:-1px;top: -1px;}

	
	#container .cts4 .inn .prev2.swiper-button-disabled{opacity:1;}
	#container .cts4 .inn .next2.swiper-button-disabled{opacity:1;}


	/*배너*/
	#container .cts5 .inn{width:100%; padding:3rem .5rem;}
	#wrap .botBan{padding:0 2rem;}
	#container .cts4 .inn .prev1:after{left: -.5rem;}
	#container .cts4 .inn .next1:after{right: -.5rem;}


	/* 푸터 */
	#footer h3,
	#footer .f_txt{float:none; }
	#footer .f_txt{text-align:left; margin-top:10px;}
}


@media (max-width:480px){
	/*비주얼*/	
	#visual .bxslider li{height:24rem;}
	#visual .bxslider li .ptext{padding: 0 1rem;}
	#visual .bxslider li .ptext .text h2 {font-size: 2rem;}
	#visual .bxslider li .ptext .text h2 br{display: none;}
	.typeahead__field {margin: 0 auto; width: 20rem;}
	.typeahead__field .inbtn span {padding: 0 .5rem 0 1rem;}
	#visual .bx-wrapper .bx-controls {bottom: 5%;}
	
	/*사업안내*/
	#container .cts1 .inn .info_box li{width:45%;padding-top:45%;}
	#container .cts1 .inn .info_box li:nth-child(2){margin-right:0;}

	/*검색*/
	.search{bottom: 5rem;}

	/*배너*/
	#wrap .botBan{padding:0 1rem;}
	#wrap .botBan .prev1:after{left: -1rem;}
	#wrap .botBan .next1:after{right: -1rem;}

}