@import "/newdevu/css/icon.css";

#wrap {background-color:#fff;}
#wrap.main{background-color:#ececec;}
#header {background-color:#fff;}
#body {}
#footer {}

#header .devu_header,
#container {max-width:960px; min-width:700px; margin:0 auto;}

.devu_header {position:relative; max-width:1000px; margin:0 auto; padding:0.463em 0;}
.devu_header .devu_nav {position:relative; border-top: 1px solid #333333;  border-bottom:1px solid #333333; text-align:center; overflow:hidden;}
.devu_header .devu_nav .logo {display:inline-block; padding:0.669em 0;}
.devu_header .devu_nav .logo a {display:block;}
.devu_header .devu_nav .logo img {width:100px;}
.devu_header .devu_nav .btn_list {position:absolute; right:0; top:0;}
.devu_header .devu_nav .btn_list a {display:block; float:left;}
.devu_header .devu_nav .btn_list .btn_search {padding:14px 14.5px;}
.devu_header .devu_nav .btn_list .btn_menu {padding:19px 10px;}
.devu_header .devu_nav .btn_list .btn_close {display:none; padding:16px 16px;}
#visual {}
#visual .vis_img  {display:table; width:100%; height:400px; overflow:hidden;}
#visual .vis_img_main  {background: url('/newdevu/images/main/main_pic.jpg') 50% 50% no-repeat;}


#visual .vis_img_main .text{display:block; background: url('/newdevu/images/main/main_text3.png') 50% 50% no-repeat; width:315px; height:148px; position:absolute; right:20px; bottom:20px;}

#visual .vis_img .box{display:table-cell; vertical-align:middle;}
#visual .vis_img .box.top{vertical-align:inherit}
#visual .vis_img .box .text{display:block;}

#visual .banner {margin-top:5px; width:100%; overflow:hidden;}
#visual .banner .bannerbox {float:left; width:25%; max-width:329px;}
#visual .banner .bannerbox div {margin-left:5px; height:65px;}
#visual .banner .bannerbox div a{background-color:#7F7F7F; display: inline-block; width:100%; height:100%;}
#visual .banner .bannerbox div a:hover{background-color:#5f996f;}
#visual .banner .bannerbox div.first-child {margin:0;}
#visual .banner .bannerbox div a .box{margin:18 auto; display: block; text-align: center; line-height: 63px;}
#visual .banner .bannerbox div a .box .text{display:inline-block; vertical-align:middle;}

.swiper-pagination-bullet-active{background:#ffffff;}
.ui-hidden-accessible{display: none;}

#search{display: none; position:absolute; width:100%; height:100%; background:rgba(255,255,255,.9); z-index:10;}
#search .inputbox{width:400px; height:150px; margin:200px auto; padding-top:50px;}
#search .inputbox .search_input{height: 51px; float: left; border-bottom: 1px solid #666666; font-size: 26px; width: 320px; padding: 0px 5px; color: #666666;}
#search .inputbox input[type=submit]{border:0;}
#search ::-webkit-input-placeholder {color: #666666; font-family: "맑은고딕", "Malgun Gothic";} /* WebKit, Blink, Edge */
#search :-moz-placeholder {color: #666666; opacity:  1; font-family: "맑은고딕", "Malgun Gothic";} /* Mozilla Firefox 4 to 18 */
#search ::-moz-placeholder {color: #666666; opacity:  1; font-family: "맑은고딕", "Malgun Gothic";} /* Mozilla Firefox 19+ */
#search :-ms-input-placeholder {color: #666666; font-family: "맑은고딕", "Malgun Gothic";} /* Internet Explorer 10-11 */ 

#menu{display: none; position:absolute; width:100%; height:100%; background:rgba(255,255,255,.9); z-index:10; text-align:center;}
#menu .menubox{margin:5% auto; width:350px;}
#menu .menubox .list{position:relative; font-size:25px; color:#666666; margin-bottom:30px;}
#menu .menubox .list a .num{display:block; font-size:20px; color:#f7931e; margin-bottom: 10px;}
#menu .menubox .list a{display:block; color:#666666;}
#menu .menubox .list a.title{margin: 0 0 20px 14px;}
#menu .menubox .list a .icon{margin-left:7px; vertical-align:middle;}
#menu .menubox .list ul{display:none;}
#menu .menubox .list ul li a{font-size:20px; color:#999999; margin-bottom:20px; display: block;}
#menu .menubox .list a.btnenolja{display:table; background-color: #999999; width: 230px; margin: 0 auto 20px;}
#menu .menubox .list a.btnenolja span{display:block; background: url('/newdevu/images/enolja_com.png') 50% 50% no-repeat; width:143px; height:25px; margin:auto; padding:18px 0;}
#menu .menubox .list .facebook{}

#sub_tab {margin:15px 2.5px; padding:15px 0;}
#sub_tab .right_tab {display:inline-block; padding:10px 5px; border-bottom:1px solid #666666; float:right;}
#sub_tab .right_tab a{margin-left:27px; color:#666666; font-size:18px;}
#sub_tab .right_tab a:first-child{margin-left:5px;}
#sub_tab .right_tab a.active{font-weight:bold;}


@media all and (max-width:780px) {
	#header .devu_header, #search, #menu,
	#container {min-width:510px; margin:0 auto;}
	#visual .vis_img  {display:table; background: url('/newdevu/images/main/main_pic.jpg') 50% 50% no-repeat; overflow:hidden; background-size:780px; height:300px;}

	#visual .vis_img_main .text{display:block; background: url('/newdevu/images/main/main_text3.png') 50% 50% no-repeat; width:315px; height:148px; position:absolute; right:20px; bottom:20px;}

	#visual .vis_img .box .read a{background-size: 70px; width:80px; height:20px;  margin:0 auto ; vertical-align:middle; padding:10px 19px; border:1px solid #ffffff;}

	#visual .banner{margin-top:1px;}
	#visual .banner .bannerbox {float:left; width:50%; max-width:inherit; height:60px;}
	#visual .banner .bannerbox div {margin-left:1px; height:60px;}
	#visual .banner .bannerbox div a{background-color:#7F7F7F; display: inline-block; width:100%; height:100%;}
	#visual .banner .bannerbox:nth-child(odd) div {margin:0;}
	#visual .banner .bannerbox:nth-child(3) div {margin:1px 0 0 0;}
	#visual .banner .bannerbox:nth-child(4) div {margin:1px 0 0 1px;}
	#visual .banner .bannerbox div a .box{margin:0 auto; display: block; text-align: center; line-height: 58px;}
	#visual .banner .bannerbox div a .box .text{display:inline-block; vertical-align: middle;}

	#sub_tab{padding:0; margin:0; background-color:#ffffff; text-align:center; padding-top: 5px;}
	#sub_tab .right_tab{padding:0; border-bottom:0; width:90%; float:none;}
	#sub_tab .right_tab a{display:inline-block; padding:10px 0 15px;}
	#sub_tab .right_tab a:first-child{margin-left:5%; float:left;}
	#sub_tab .right_tab a:last-child{margin-right:5%; float:right;}
}
@media all and (min-width:360px) and (max-width:510px) {
	.icon-search {background-size: 300px; background-position: -2px -2px; width:23px; height:21px;}
	.icon-menu {background-size: 300px; background-position: -25px 2px; width:27px; height:29px;}
	.icon-close {background-size:300px; background-position: -248px -9px; width:18px; height:20px;}
	.icon-search_enter{background-size:300px; background-position:-192px -5px; width:41px; height:37px;}
	.icon-plus_s{background-size:300px; background-position:-148px -7px; width:9px; height:10px;}

	#header .devu_header, #search, #menu,
	#container {min-width:360px; margin:0 auto;}

	.devu_header .devu_nav .logo{padding:0.569em 0;}
	.devu_header .devu_nav .logo img{width:70px;}
	.devu_header .devu_nav .btn_menu{padding:0;}

	.devu_header .devu_nav .btn_list {position:absolute; right:0; top:0;}
	.devu_header .devu_nav .btn_list a {display:block; float:left;}
	.devu_header .devu_nav .btn_list .btn_search {padding:12px 12px;}
	.devu_header .devu_nav .btn_list .btn_menu {padding:8px 10px;}
	.devu_header .devu_nav .btn_list .btn_close {display:none; padding:12px 14.5px;}

	#search .inputbox{width:300px; margin:100px auto;}
	#search .inputbox .search_input{height: 33px; font-size:18px; width:230px;}

	#menu .menubox .list{font-size:20px; margin-bottom:30px;}
	#menu .menubox .list ul li a{font-size:15px;}
	#menu .menubox .list a.btnenolja{width:180px;}
	#menu .menubox .list a.btnenolja span{display:block; background: url('/newdevu/images/enolja_com.png') 50% 50% no-repeat; background-size:100px; width:100px; height:25px; margin:auto; padding:10px 0;}

	#visual .vis_img  {display:table; background: url('/newdevu/images/main/main_pic.jpg') 50% 50% no-repeat; overflow:hidden; background-size:510px; height:200px;}
	#visual .vis_img_main .text{display:block; background: url('/newdevu/images/main/main_text3.png') 50% 50% no-repeat; background-size:250px; width:250px; height:117px; position:absolute; right:20px; bottom:20px;}

	#visual .vis_img .box .text{display:block; background: url('/newdevu/images/main/mobile_main_text01.png') 50% 50% no-repeat; background-size: 340px; width:340px; height:31px;  margin:0 auto ; vertical-align:middle;}
	#visual .vis_img .box .read a{background-size: 65px; width:75px; height:20px;  margin:0 auto ; vertical-align:middle; padding:10px 19px; border:1px solid #ffffff;}
	#visual .banner{margin-top:1px;}
	#visual .banner .bannerbox {float:left; width:50%; max-width:inherit; height:60px;}
	#visual .banner .bannerbox div {margin-left:1px; height:60px;}
	#visual .banner .bannerbox div a{background-color:#7F7F7F; display: inline-block; width:100%; height:100%;}
	#visual .banner .bannerbox:nth-child(odd) div {margin:0;}
	#visual .banner .bannerbox:nth-child(3) div {margin:1px 0 0 0;}
	#visual .banner .bannerbox:nth-child(4) div {margin:1px 0 0 1px;}
	#visual .banner .bannerbox div a .box{margin:0 auto; display: block; text-align: center; line-height: 58px;}
	#visual .banner .bannerbox div a .box .text{display:inline-block;vertical-align: middle;}
	#main_devu .content .contentbox .box .triangle{top:235px;}

	#sub_tab{padding:0; margin:0; background-color:#ffffff; text-align:center; padding-top:3px;}
	#sub_tab .right_tab{padding:0; border-bottom:0; width:90%; float:none;}
	#sub_tab .right_tab a{display:inline-block; padding:10px 0 15px; font-size:15px;}
	#sub_tab .right_tab a:first-child{margin-left:5%; float:left;}
	#sub_tab .right_tab a:last-child{margin-right:5%; float:right;}

}
@media all and (max-width:360px) {
	.icon-search {background-size: 300px; background-position: -2px -2px; width:23px; height:21px;}
	.icon-menu {background-size: 300px; background-position: -25px 2px; width:27px; height:29px;}
	.icon-close {background-size:300px; background-position: -248px -9px; width:18px; height:20px;}
	.icon-search_enter{background-size:300px; background-position:-192px -5px; width:41px; height:37px;}
	.icon-plus_s{background-size:300px; background-position:-148px -7px; width:9px; height:10px;}

	#header .devu_header, #search, #menu,
	#container {min-width:310px; margin:0 auto;}
	.devu_header .devu_nav .logo{padding:0.569em 0;}
	.devu_header .devu_nav .logo img{width:70px;}

	.devu_header .devu_nav .btn_list {position:absolute; right:0; top:0;}
	.devu_header .devu_nav .btn_list a {display:block; float:left;}
	.devu_header .devu_nav .btn_list .btn_search {padding:12px 12px;}
	.devu_header .devu_nav .btn_list .btn_menu {padding:8px 10px;}
	.devu_header .devu_nav .btn_list .btn_close {display:none; padding:12px 14.5px;}

	#search .inputbox{width:250px; margin:50px auto;}
	#search .inputbox .search_input{height: 33px; font-size:15px; width:180px;}

	#menu .menubox{width:310px;}
	#menu .menubox .list{font-size:20px; margin-bottom:30px;}
	#menu .menubox .list ul li a{font-size:15px;}
	#menu .menubox .list a.btnenolja{width:150px;}
	#menu .menubox .list a.btnenolja span{display:block; background: url('/newdevu/images/enolja_com.png') 50% 50% no-repeat; background-size:100px; width:100px; height:25px; margin:auto; padding:10px 0;}

	#visual .vis_img  {display:table; background: url('/newdevu/images/main/main_pic.jpg') 50% 50% no-repeat; overflow:hidden; background-size:400px; height:160px;}
	#visual .vis_img_main .text{display:block; background: url('/newdevu/images/main/main_text3.png') 50% 50% no-repeat; background-size:220px; width:220px; height:110px; position:absolute; right:20px; bottom:20px;}

	#visual .vis_img .box .text{display:block; background: url('/newdevu/images/main/mobile_main_text01.png') 50% 50% no-repeat; background-size: 290px; width:290px; height:31px;  margin:0 auto ; vertical-align:middle;}
	#visual .vis_img .box .read{margin-top:20px;}

	#visual .vis_img .box .read a{background-size: 60px; width:70px; height:16px;  margin:0 auto ; vertical-align:middle; padding:10px 19px; border:1px solid #ffffff;}
	#visual .banner{margin-top:1px;}
	#visual .banner .bannerbox {float:left; width:50%; max-width:inherit; height:50px;}
	#visual .banner .bannerbox div {margin-left:1px; height:50px;}
	#visual .banner .bannerbox div a{background-color:#7F7F7F; display: inline-block; width:100%; height:100%;}
	#visual .banner .bannerbox:nth-child(odd) div {margin:0;}
	#visual .banner .bannerbox:nth-child(3) div {margin:1px 0 0 0;}
	#visual .banner .bannerbox:nth-child(4) div {margin:1px 0 0 1px;}
	#visual .banner .bannerbox div a .box{margin:0 auto; display: block; text-align: center; line-height: 48px;}
	#visual .banner .bannerbox div a .box .text{display:inline-block; vertical-align: middle;background-size: 100px; width: 100px;}
	#visual .banner .bannerbox div.first-child a .box .text{background-size: 125px; width: 125px;}
	#main_devu .content .contentbox .box .triangle{top:235px;}

	#sub_tab{padding:0; margin:0; background-color:#ffffff; text-align:center; padding-top:3px;}
	#sub_tab .right_tab{padding:0; border-bottom:0; width:90%; float:none;}
	#sub_tab .right_tab a{display:inline-block; padding:10px 0 15px; font-size:15px; margin-left:10px;}
	#sub_tab .right_tab a:first-child{margin-left:5%; float:left;}
	#sub_tab .right_tab a:last-child{margin-right:5%; float:right;}
}
/*@media all and (orientation:landscape) and (max-width:768px) { /* 가로모드, iPad 제외(가로 768px이하) 
/*}*/
/*@media all and (min-width:768px) { /* 가로 768px 이상 (iPad 및 PC) */
/*}*/