@charset "utf-8";
/*	
 * Name: 동원 옴푸드
 * Part: stylesheet
 * Author : Heo Jun Beom (hjb0929@nate.com)
 */
/* CSS Document */
#wrap {position:relative;width:100%;height:100%}

#visualBg {overflow:hidden;position:fixed;width:100%;height:100%;left:0;top:0;}
#visualBg ul {position:relative;}
#visualBg ul li {display:none;overflow:hidden;position:absolute;left:0;top:0;width:100%;text-align:center;} /* opacity:0;filter:alpha(opacity=0); */
#visualBg ul li img {}

#main {position:relative;width:100%;height:100%;}
#main #content {position:absolute;top:50%;left:0;width:100%;} /* min-height:inherit !important */
#main #content > a {position:absolute;top:50%;z-index:19;margin-top:-30px;}/*z-index:20;*/
/*
#main #content > a {display:none;position:absolute;top:50%;margin-top:-30px;z-index:20;}*/
#main #content > .prev {left:40px;}
#main #content > .next {right:40px;}

#main .detail {width:80%;max-width:800px;margin:0 auto;}
#main .detail .main_title {position:relative;max-width:100%;margin:0 auto;height:225px;}
#main .detail .main_title .line {position:absolute;bottom:0;}
#main .detail .main_title .line img {vertical-align:bottom}
#main .detail .main_title h3 {position:relative;width:100%;}
#main .detail .main_title h3 span {display:block;margin:0 auto;}
#main .detail .main_title h3 span.txt01 {width:100%;}/*width:80%;*/
#main .detail .main_title h3 span.txt02 {width:100%;padding:2px 0 40px;}/*width:50%;*/
/*2014-12-18*/
#main .detail .main_title h3 span.txt02 img {margin:0 auto;}
#main .detail .main_title h3 span.txt02 img.web {display:block;}
#main .detail .main_title h3 span.txt02 img.mob {display:none;}
/*#main .detail .main_title h3 span.txt02 img.web {visibility:visible;}
#main .detail .main_title h3 span.txt02 img.mob {visibility:hidden;height:0;width:0;}*/
/* //2014-12-18*/
#main .detail .main_title h3 span img {position:relative;max-width:100%;}
#main .detail .main_title .line img {position:relative;max-width:80%;}
#main .detail .main_title .line {width:100%;}

#main .detail .contBtn {position:relative;width:100%;margin:0 auto;text-align:center;} /* padding-top:40px; */
#main .detail .contBtn dt {position:relative;float:left;width:20%;padding-top:30px}
#main .detail .contBtn dt:first-child{margin-left:20%}
#main .detail .contBtn dt.baner_vid{position:absolute;}
#main .detail .contBtn dt a {display:block;overflow:hidden;position:relative;top:80px;width:140px;height:140px;margin:0 auto;opacity:0;}/*filter:alpha(opacity=0);*/
#main .detail .contBtn dt .baner_video {display:block;overflow:hidden;position:relative;top:80px;width:140px;height:140px;margin:0 auto;opacity:0;cursor:pointer;}/*filter:alpha(opacity=0);*/
#main .detail .contBtn dt a:hover img, #main .detail .contBtn dt a.on img {margin-top:-140px;}
#main .detail .contBtn dt .baner_video:hover img, #main .detail .contBtn dt .baner_video.on img {margin-top:-140px;}
#main .detail .contBtn dt a img {width:100%;}
#main .detail .contBtn dt .baner_video img {width:100%;}
#main .detail .contBtn dd {display:none;position:absolute;top:50%;left:50%;width:980px;height:620px;margin:-310px 0 0 -477px;z-index:30;}
#main .detail .contBtn dd a, #main .detail .contBtn dd h4 {display:block;position:absolute;}
#main .detail .contBtn dd h4 img, #main .detail .contBtn dd a img {width:100%;}
#main .detail .contBtn dd .close {right:50px;top:15px;}
#main .detail .contBtn dd h4 {top:75px;left:15px;}

#main .detail .contBtn .baner01 h4 {left:-25px;top:40px;width:30%;}
#main .detail .contBtn .baner01 .bn1 {left:5px;top:247px;width:28%;}
#main .detail .contBtn .baner01 .bn2 {left:278px;top:-1px;width:30%;}
#main .detail .contBtn .baner01 .bn3 {left:570px;top:48px;width:40%;}
#main .detail .contBtn .baner01 .bn4 {left:571px;top:235px;width:40%;}
#main .detail .contBtn .baner01 .bn5 {left:280px;top:436px;width:50%;}
#main .detail .contBtn .baner01 .qna {right:78px;top:480px;width:9%;}
#main .detail .contBtn .baner01 .close {right:30px;top:5px;}

#main .detail .contBtn .baner02 {margin:-290px 0 0 -477px}
#main .detail .contBtn .baner02 h4 {left:-60px;top:4px;width:33%;}
#main .detail .contBtn .baner02 .bn1 {left:21px;top:200px;width:26%;}
#main .detail .contBtn .baner02 .bn2 {left:270px;top:-7px;width:35%;}
#main .detail .contBtn .baner02 .bn3 {left:605px;top:33px;width:35%;}
#main .detail .contBtn .baner02 .bn4 {left:42px;top:384px;width:24%;}
#main .detail .contBtn .baner02 .bn5 {left:274px;top:384px;width:49%;}
#main .detail .contBtn .baner02 .qna {right:90px;bottom:100px}
#main .detail .contBtn .baner02 .close {right:50px;top:-5px;}

#main .detail .contBtn .baner03 {margin-left:-507px}
#main .detail .contBtn .baner03 h4 {left:-15px;top:10px;width:33%;}
#main .detail .contBtn .baner03 .bn1 {left:30px;top:191px;width:31%;}
#main .detail .contBtn .baner03 .bn2 {left:322px;top:16px;width:40%;}
#main .detail .contBtn .baner03 .bn3 {left:704px;top:84px;width:30%;}
#main .detail .contBtn .baner03 .bn4 {left:322px;top:360px;width:65%;}
#main .detail .contBtn .baner03 .qna {left:193px;bottom:70px;width:10%;}
#main .detail .contBtn .baner03 .close {right:0;top:35px;}

#main .detail .contBtn .baner04 {margin-left:-487px}
#main .detail .contBtn .baner04 h4 {left:-100px;top:0;width:39%;}
#main .detail .contBtn .baner04 .bn1 {left:11px;top:203px;width:30%;}
#main .detail .contBtn .baner04 .bn2 {left:304px;top:17px;width:30%;}
#main .detail .contBtn .baner04 .bn2_go {width:92px;height:29px;left:405px;top:333px;background:url("/static/kor/images/bg/bg_btn_blank.png") repeat left top;}/* 2014-12-29 추가 */
#main .detail .contBtn .baner04 .bn3 {left:596px;top: -5px;width:25%;}
#main .detail .contBtn .baner04 .bn4 {left:596px;top:215px;width:38%;}
#main .detail .contBtn .baner04 .bn5 {left:304px;top:408px;width:64%;}
#main .detail .contBtn .baner04 .qna {right:50px;top:73px}
#main .detail .contBtn .baner04 .close {right:19px;top:0;}

#main .homefood_pop {display: none; position: fixed; top: 54%; left: 50%; transform: translate(-50%, -50%); width: 980px; z-index: 111;}
#main .homefood_vod {width: 980px; height: 620px; background: #000; border-radius: 5px;}
#main .homefood_vod iframe {width: 920px; height: 518px; margin-top: 20px; border-radius: 5px;}
#main .homefood_vod h1 {margin: 32px 0 0 32px; text-align: left; color: #fff; font-size: 20px; font-weight: normal; line-height: 1.5;}
#main .homefood_close {position: absolute; top: -56px; right: 0; background: #000; width: 46px; height: 46px; border-radius: 50%;}
#main .homefood_close a {width: 100%; height: 100%; display: block;top:0 !important;right:0 !important;}
#main .homefood_close a img {display: block; padding: 14px; width: 19px !important; height: 19px;}

@media screen and (max-width: 1200px) {
	#main .homefood_pop {width: 90%;}
	#main .homefood_vod {width: 100%; height: auto; padding-bottom: 32px;}
	#main .homefood_vod iframe {width: 90%; height: 400px;}
}
	
/*default 사이즈*/
@media screen and (min-width: 900px) {
	#main {min-height:496px !important}
}

/*중간 사이즈*/
@media screen and (max-width: 1024px){
	
	#main .detail .contBtn dt {width:20%;}
	#main .detail .contBtn dt a {width:110px;height:110px;}
	#main .detail .contBtn dt a:hover img, #main .detail .contBtn dt a.on img {margin-top:-110px;}
	
	#main .detail .contBtn dd {width:680px;height:440px;margin:-220px 0 0 -325px}
	#main .detail .contBtn dd .close {width:3%;}
	
	#main .detail .contBtn dd.baner01 h4 {left:22px;top:22px;width:25%;}
	#main .detail .contBtn dd.baner01 .bn1 {left:8px;top:163px;width:28%;}
	#main .detail .contBtn dd.baner01 .bn2 {left:198px;top:-10px;width:29%;}
	#main .detail .contBtn dd.baner01 .bn3 {left:395px;top:28px;width:38%;}
	#main .detail .contBtn dd.baner01 .bn4 {left:395px;top:150px;width:38%;}
	#main .detail .contBtn dd.baner01 .bn5 {left:196px;top:282px;width:55%;}
	#main .detail .contBtn dd.baner01 .qna {right:38px;top:322px;width:9%;}
	#main .detail .contBtn dd.baner01 .close {right:34px;top:-5px;}


	#main .detail .contBtn dd.baner02 {margin:-245px 0 0 -320px}
	#main .detail .contBtn dd.baner02 h4 {left:0px;top:75px;width:27%}
	#main .detail .contBtn dd.baner02 .bn1 {left:11px;top:181px;width:26%;}
	#main .detail .contBtn dd.baner02 .bn2 {left:185px;top:34px;width:35%;}
	#main .detail .contBtn dd.baner02 .bn3 {left:418px;top:71px;width:35%;}
	#main .detail .contBtn dd.baner02 .bn4 {left:32px;top:307px;width:24%;}
	#main .detail .contBtn dd.baner02 .bn5 {left:187px;top:308px;width:48%;}
	#main .detail .contBtn dd.baner02 .qna {right:60px;bottom:20px;width:12%}
	#main .detail .contBtn dd.baner02 .close {right:40px;top:40px;}

	#main .detail .contBtn dd.baner03 {margin:-220px 0 0 -347px}
	#main .detail .contBtn dd.baner03 h4 {left:-15px;top:20px;width:33%;}
	#main .detail .contBtn dd.baner03 .bn1 {left:10px;top:160px;width:31%;}
	#main .detail .contBtn dd.baner03 .bn2 {left:215px;top:40px;width:40%;}
	#main .detail .contBtn dd.baner03 .bn3 {left:482px;top:86px;width:30%;}
	#main .detail .contBtn dd.baner03 .bn4 {left:215px;top:280px;width:65%;}
	#main .detail .contBtn dd.baner03 .qna {left:120px;bottom:30px;width:10%;}
	#main .detail .contBtn dd.baner03 .close {right:5px;top:45px;}
	
	#main .detail .contBtn dd.baner04 {margin:-220px 0 0 -347px}
	#main .detail .contBtn dd.baner04 h4 {left:-55px;top:10px;}
	#main .detail .contBtn dd.baner04 .bn1 {left:30px;top:148px;width:29%;}
	#main .detail .contBtn dd.baner04 .bn2 {left:229px;top:20px;width:30%;}
	#main .detail .contBtn dd.baner04 .bn2_go {width:64px;height:20px;left:300px;top:243px;}/* 2014-12-29 추가 */
	#main .detail .contBtn dd.baner04 .bn3 {left:435px;top: 5px;width: 25%;}
	#main .detail .contBtn dd.baner04 .bn4 {left:435px;top: 160px;width:37%;}
	#main .detail .contBtn dd.baner04 .bn5 {left:229px;top:292px;width:60%;}
	#main .detail .contBtn dd.baner04 .qna {right:10px;top:57px;width:10%;}
	#main .detail .contBtn dd.baner04 .close {right:0px;top:10px;}
	
	#main .detail .contBtn dd a.close {width:4% !important}
	#main .detail .contBtn dd .homefood_pop .homefood_close a.close{padding:0;width:100% !important}
}

@media screen and (max-width: 883px){
	#main {min-height:646px !important}
	#main .detail .contBtn dt {width:20%;}
}

@media screen and (max-width: 696px){
	#main #content {top:auto}
	#main #content > a.prev {left:10px;}
	#main #content > a.next {right:10px;}
	#main #content > a img {width:70%;}
	
	#main .detail {max-width:502px}
	#main .detail .main_title {height:auto}/*height:134px*/
	/*2014-12-18*/
	#main .detail .main_title h3 span.txt02 {width:90%;padding:5px 0 10px;}
	#main .detail .main_title h3 span.txt02 img {margin:0 auto;}
	#main .detail .main_title h3 span.txt02 img.web {display:none;}
	#main .detail .main_title h3 span.txt02 img.mob {display:block;}
	/*	#main .detail .main_title h3 span.txt02 img.mob {visibility:visible;height:auto;width:auto;}
	#main .detail .main_title h3 span.txt02 img.web {visibility:hidden;height:0;width:0;}*/
	/* //2014-12-18*/
	/* #main .detail .contBtn {padding-top:66px;} */
	#main .detail .contBtn dt {width:50%;margin:10px 0;}
	#main .detail .contBtn dt:first-child{margin-left:0}
	#main .detail .contBtn dt.baner_vid{position:relative;width:100%}
	#main .detail .contBtn dt a {width:110px;height:110px;}
	#main .detail .contBtn dt a:hover img, #main .detail .contBtn dt a.on img {margin-top:-110px;}
	
	#main .detail .contBtn dd {position:relative;left:auto;top:66px;width:100%;height:auto;margin:0 auto !important}
	#main .detail .contBtn dd h4,
	#main .detail .contBtn dd a {position:static;left:auto !important;top:auto !important;width:auto !important;margin:0 auto;padding:5px 10px;}
	#main .detail .contBtn dd h4 {margin:0 auto;padding-bottom:20px}
	#main .detail .contBtn dd a.qna {width:40% !important;}
	#main .detail .contBtn dd a.close {position:absolute;right:0 !important;top:0 !important;width:7% !important}
	#main .detail .contBtn dd.baner04 .bn2_go {display:none !important}/* 2014-12-29 추가 */
}


@media screen and (max-width: 450px){
	#main #content {}
	#main #content > a.prev {left:10px;}
	#main #content > a.next {right:10px;}
	#main #content > a img {width:70%;}
	
	#main .detail {width:100%;}
	#main .detail .main_title {height:auto}/*height:104px*/
	#main .detail .main_title h3 span.txt01 {width:90%;}/*width:60%;height:35px;*/
	#main .detail .main_title h3 span.txt02 {width:90%;padding:0 10px 30px;}/*width:50%;padding:5px 0 10px;*/
	#main .detail .contBtn {width:70%;}
	#main .detail .contBtn dt {margin:5px 0;}
	#main .detail .contBtn dt a {width:100px;height:100px;}
	#main .detail .contBtn dt a:hover img, #main .detail .contBtn dt a.on img {margin-top:-100px;}
}


@media screen and (max-height: 530px) and (max-width: 696px){
	#main {min-height:425px !important;}
	#main #content {top:auto;margin-top:0;}
/*	#main .detail .main_title {height:135px;} */
	#main .detail .contBtn {width:100%;} /* padding-top:30px */
	#main .detail .contBtn dt {width:25%;}
	#main .detail .contBtn dt a {width:60px;height:60px;}
	#main .detail .contBtn dt a:hover img, #main .detail .contBtn dt a.on img {margin-top:-60px;}
	#main .detail .contBtn dd {padding-bottom:20px;}
	#main #content > a {display:none;position:absolute;top:50%;margin-top:-30px;z-index:19;}/* 추가*//*z-index:19*/
}

@media screen and (max-height: 310px) and (max-width: 480px){
	#main #content {top:auto;margin-top:0;}
	#main .detail .main_title {height:124px}
	#main .detail .contBtn dt a {width:60px;height:60px;}
	#main .detail .contBtn dt a:hover img, #main .detail .contBtn dt a.on img {margin-top:-60px;}
}
