@media screen and (max-width:768px){
/* 레이아웃 */
html {overflow-y:scroll; min-width:100%;}
body{width:100%; background:none;}
#hd {min-width:320px; width:100%; height:95px; position:relative; background:#fff;}
#hd_wrapper { width:100%;}
#hd_pop {width:100%;}
#wrapper{width:100%;}
#container_index { width:100%; height:auto; margin:0;}
#container{ width:100%;}
#scont_wrap{ position:relative;margin:0px; padding-top:0; min-height:auto; width:100%;}
#left{ position:static; width:100%;}
#scont{ width:100%;}

/*로고*/
#logo {padding:25px 0 20px 0; height:auto; width:170px; margin:0 auto; position:relative;}
#logo img{ width:100%;}
#logo .mlogo { display:block;}
#mHome{ display:block; position:absolute; top:28px; right:10px;}
#gnb{ display:none;}
#tnb{ display:none;}

/* 카테고리 왼쪽메뉴 */
#hd .nav_open{ position:absolute; top:38px; left:15px; display:block ;}
#hd .nav_open span{ display:block; width:32px; height:3px; border-radius:5px; margin-bottom:4px; background:#33aae5;}
#hd .sch{top:40px; right:15px;}

#mask {position: absolute; z-index:1000; top:0; left:0; background:#000; display:none;}
#hd .nav_close img {height:30px;}
#hd .nav_close {padding:10px 0 0; position:absolute; z-index:1001; right:10px}
#navtoggle { display:block; position:fixed; z-index:1000; top:0; left:0; overflow:auto; background:#fff; width:0; display:none; max-width:250px; border-top:3px solid #635e50} /* width:46.87%  display:none*/
#navtoggle ul li {padding:0 0; clear:both; width:100%;}

#navtoggle #left_menu{width:100%; position:relative; height:100%; text-align:left; top:0; z-index:1000; text-indent:5%; background:#2ba7e0;}
#navtoggle img{ height:45px; vertical-align:middle}
#navtoggle .close{top:0px; right:0;}
#navtoggle .close img{height:33px; position:absolute; top:15px; right:0px;}

#navtoggle .title{color:#fff; line-height:40px; font-size:1.35em; padding:10px 0 5px; border-bottom:1px solid #eee; font-weight:bold; letter-spacing:-1px}
#navtoggle .title img{height:13px; margin-top:-2px;}

/*1차메뉴*/
#navtoggle li.mgnb_1dli a.mgnb_1da{display:block; border-bottom:1px solid #eee; font-size:1.2em; line-height:3em; color:#fff;
					  background:url(../img/mobile/arrow_bg.png) no-repeat 225px 15px; cursor:pointer; padding:0 0 0 10px;}
#navtoggle li.mgnb_1dli a.selected{background:url(../img/mobile/arrow_bg_on.png) no-repeat 225px 15px #3d3d3d; color:#FFF; font-weight:600;}			  
/*2차메뉴*/
#navtoggle li.mgnb_2dli a.mgnb_2da{background:#fff; display:block; border-bottom:1px dotted #d7d7d7; font-size:1em; line-height:2.5em; text-indent:10%;}
#navtoggle ul.mgnb_2dul{ display:none;}

/* 하단 레이아웃 */
#ft { font-size:12px; min-width:320px;}
#ft_wrapper{ width:100%;}
#ft_menu{ padding:0 15px;width: 100%;}
#ft_menu a{ padding:15px 7px; font-size:1em;}
#ft_copy { padding:20px 15px;}
#ft_copy .flogo{ display:none;}
#ft_copy p{ font-size:12px; line-height:1.6em;}
#ft_copy .name{ font-size:12px;}
#ft_copy .copyright{ font-size:10px;}
#mLogin{ display:block; padding-bottom:20px; margin:0 auto; text-align:center;}
#mLogin a{ display:inline-block; padding:7px 13px; border-radius:4px; font-size:11px; color:#fff; font-weight:bold; text-align:center;}
#mLogin .mlogin{ background:#ff4749;}
#mLogin .madmin{ background:#515050;}

/*메인비쥬얼*/
#mvisual{ width:100%; height:290px; max-height:290px; }
#m_slogan_m{ display:block; position:absolute; top:60px;  opacity:0; z-index:999; left:50%; margin-left: -166px;}
#m_slogan_m img{ height: 85px;}
#m_building{ display:block; width:80%; max-width:350px; position:absolute; top:90px; right:0px;}
#m_building img{ width:100%; height:auto;}
#slider_m{ display:block; width:100%; height:auto; opacity:0;}
#slider_m .s1{ background:url(../img/mobile/mvisual01.jpg) no-repeat center top/100% auto;}
#slider_m .s2{ background:url(../img/mobile/mvisual02.jpg) no-repeat center top/100% auto;}
#slider_m .s3{ background:url(../img/mobile/mvisual03.jpg) no-repeat center top/100% auto;}
#slider_m .s4{ background:url(../img/mobile/mvisual04.jpg) no-repeat center top/100% auto;}
#slider_m .s1, #slider_m .s2, #slider_m .s3, #slider_m .s4{ width:100%; height:280px;}
#slider_m .slidesjs-container, #slider_m .slidesjs-control{ width:100% !important; height:280px !important;}

a.slidesjs-navigation{ display:none;}
.slidesjs-pagination{ display:none;}
#m_slogan{ display:none}
#m_slogan2 ,#m_slogan3{ display:none;}
#slider{ display:none !important;}

.block ,.m_banner{ display:none;}
/* 메인 */
#mpro{ width:100%; margin:0 auto; border-top:0; padding:3px;}
#mpro .row{ margin:0 auto;}
#mpro dl{ width:48%; height:auto; margin:3px 2px; border-radius:8px; box-sizing:border-box; background-size:60px auto; min-height:160px;}
#mpro dl img{ width:100%; height: auto;}
#mpro .btn{ top:95px; left:20px;}
#mpro .btn a{ background:#3461bd; font-size:0.9em;}
#mpro .mp1{ background-position: 90% 80px; background-size:60px auto;}
#mpro .mp2{ background-position: 90% 95px;}
#mpro .mp3{ background-position: 90% 85px; background-size:55px auto;}
#mpro .mp4{ background-position: 90% 95px;}

#mpro .fl{ display:none;}
#mpro .bbs{ width:100%; padding: 20px 12px; margin:0 auto ; border:1px solid #eee; border-radius:8px;}
#ft_ft02 a{ padding:0;}
/*서브이미지*/
#svisual{ display:none;}

/*서브-내용부분*/
#sub_title{ margin-bottom:0; padding-bottom:10px; border:none;}
.container_title { font-size:1.6em; line-height:1.6em; background:url(../img/sub/smenu_dot.png) no-repeat top left; padding-top:58px}




/*모바일화면 일때, 기술정보 / 커뮤니티 페이지에 서브2차메뉴가 보이지않도록 하기위해(2차메뉴가 1개이므로 보일필요가 없음)
  관리자페이지 '환경설정>서브메뉴설정' 에서 해당 2차메뉴에 직접 id값을 매겨서 css로 display:none처리로
  보이지않게 처리했음*/
#sm2{ display:none; border-bottom:none;}



}