@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

.mbom_bg {background:url(http://www.jhunsunghee.net/Images/Common/Img_bomnal_M.jpg);}

.mbom_bg td {line-height:0;}
.mbom_bg td #existResult a {line-height:18px;}
.bom_bg {height:auto!important; min-height: 700px;}
#lblContents {height:auto!important;}

.gnb {width:1000px; height:100px; padding-top:24px; position: relative;}
.gnb h1 {margin:0; padding:0; width:190px; float: left; display: inline-block; text-align: center;}
.gnb .util {position: absolute; right:10px; top:0px; opacity: .7;}
.gnb .util a {float:left; display: inline-block; padding:5px 15px; position: relative;}
.gnb .util a:first-child:after {content:""; position: absolute; right:-1px; top:12px; width:2px; height:2px; background: #000; opacity: .7; border-radius: 2px;}
.accordion {width:810px; max-width: 810px; height: 73px; float: right; overflow: hidden; margin: 0 auto;}
.accordion ul, .accordion li, .accordion p {list-style: none!important; margin:0; padding:0;}
.accordion > ul {width:100%; display: table; table-layout: fixed; margin: 0;padding: 0; text-align: right;transition: all 500ms ease; }
.accordion > ul > li {display: inline-block; vertical-align: bottom; position: relative;  width:50%; height: 73px;  transition: all 500ms ease; float:left; }
.accordion > ul > li > p {width:100%; text-align: center; height:73px; cursor: pointer; margin:0; padding:0; transition: all 500ms ease; display: inline-block; float:left; }
.accordion > ul > li > p > img {margin-top:25px;}
.accordion > ul > li > div {display: inline-block; display: none; float: left; overflow: hidden; width:470px; opacity:0; transition: all 500ms ease; transition-delay: 0s;}
.accordion > ul > li > div > .dep1 {margin:0; padding:0;}
.accordion > ul > li:nth-child(1) > div > .dep1 {margin-top:13px;}
.accordion > ul > li:nth-child(2) > div > .dep1 {margin-top:28px;}
.accordion > ul > li:nth-child(2) > div > .dep1 li a {padding:0 15px;}


.accordion > ul:hover > li {width:20%!important;}
.accordion > ul:hover > li:hover {width:80%!important;}
.accordion > ul:hover > li:nth-child(1):hover {background: url("../Images/new/gnb1_bg.png") no-repeat left top;}
.accordion > ul:hover > li:nth-child(2):hover {background: url("../Images/new/gnb2_bg.png") no-repeat left top;}

.accordion > ul:hover > li > p {width:150px; padding-left:20px; }
.accordion > ul:hover > li:hover > div {width:470px;opacity: 1; display: inline-block}
.accordion > ul:hover > li:hover > .dep1 {overflow: hidden;}

.accordion .dep1 a, .accordion .dep1 li {line-height: 0;}
.accordion .dep1 > li {float:left;margin:0;position: relative;display: inline-block;margin-bottom: 3px;}
.accordion .dep1 > li > a {padding: 0 7px 2px 7px;display: block;}
.accordion .dep1 > li:after {content:""; position: absolute; width:2px; height:2px; background: #513b4e; right:0; top:9px; margin-right:-1px; border-radius: 2px;}
.accordion .dep1 > li:last-child:after, .accordion .dep1 > li:nth-child(5):after  {display: none;}
.accordion .dep2 {clear: both;background: #f6e3f5;border-radius: 20px;width:calc(100% - 54px);padding-left:0!important;}
.accordion .dep2 > a {background: #f3d5f2; border-radius: 20px; width:70px!important; text-align: center; overflow: hidden; padding-top:2px!important; float:left; display: inline-block;}
.accordion .dep2 > ul {padding-top:2px!important;}
.accordion .dep2 > ul > li {float: left; display: inline-block; opacity: .85;position: relative;}
.accordion .dep2 > ul > li > a {padding:0 8px;}
.accordion .dep2 > ul > li:after {content:""; position: absolute; width:2px; height:2px; background: #513b4e; right:0; top:9px; border-radius: 2px; opacity: .7;}
.accordion .dep2 > ul > li:last-child:after {display: none;}
.accordion .dep2 > ul > li:hover {opacity: 1;}

.main_visual {z-index: 1; left:0; width:1000px; position:absolute; top:100px; height:570px;}
.main_visual > div {position: absolute; left:0; top:0px;width:1000px; height:570px; }
.main_visual .img1 {background: url(../Images/new/main_img1.png) no-repeat; z-index: 1; animation:imgbox 1s ease-in 1 backwards; -webkit-animation:imgbox 1s ease-in 1 backwards; animation-delay: 0s;}
.main_visual .img2 {background: url(../Images/new/main_img2.png) no-repeat; z-index: 2; animation:imgbox 1s ease-in 1 backwards; -webkit-animation:imgbox 1.5s ease-in 1 backwards; animation-delay: 1s;}
.main_visual .img3 {background: url(../Images/new/main_img3.png) no-repeat; z-index: 3; animation:imgbox 2s ease-in 1 backwards; -webkit-animation:imgbox 3s ease-in 1 backwards; animation-delay: 2s;}
.main_visual .txt {z-index: 4; left:auto; right:0; top:100px; width:420px; height:300px;}
.main_visual .txt .txt1 {animation:imgbox1 2s ease-in 1 backwards; -webkit-animation:imgbox1 1s ease-in 1 backwards; animation-delay: 4s;}
.main_visual .txt .txt2 {animation:imgbox2 2s ease-in 1 backwards; -webkit-animation:imgbox2 1s ease-in 1 backwards; animation-delay: 5s; margin-left:150px;}


/* 메인비주얼 애니메이션 */
@keyframes imgbox {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@-webkit-keyframes imgbox {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes imgbox1 {
	0%{opacity: 0; margin-left:50px;}
	100%{opacity: 1; margin-left:0;}
}
@-webkit-keyframes imgbox1 {
	0%{opacity: 0; margin-left:50px;}
	100%{opacity: 1; margin-left:0;}
}
@keyframes imgbox2 {
	0%{opacity: 0; margin-left:100px;}
	100%{opacity: 1; margin-left:150px;}
}
@-webkit-keyframes imgbox2 {
	0%{opacity: 0; margin-left:100px;}
	100%{opacity: 1; margin-left:150px;}
}
.mbom_bg #Layer2 {z-index: 10!important;}

.sub_visual {width:250px; height:561px; position: relative; display: inline-block; }
.sub_visual div {width:250px; height:561px; left:0; position: absolute;top:0;}
.sub_visual .img1 {animation:imgbox 1s ease-in 1 backwards; -webkit-animation:imgbox 1s ease-in 1 backwards; animation-delay: 0s; z-index: 2;}
.sub_visual .img2 {animation:imgbox 2s ease-in 1 backwards; -webkit-animation:imgbox 2s ease-in 1 backwards; animation-delay: 1s; z-index: 1;}
.sub_visual .m1 .img1 {background: url(../Images/new/sub1_bg.png) no-repeat; z-index: 1; }
.sub_visual .m1 .img2 {background: url(../Images/new/sub1_img1.png) no-repeat; z-index: 2; }
.sub_visual .m2 .img1 {background: url(../Images/new/sub2_bg.png) no-repeat;}
.sub_visual .m2_1 .img2 {background: url(../Images/new/sub2_img1.png) no-repeat;}
.sub_visual .m2_2 .img2 {background: url(../Images/new/sub2_img2.png) no-repeat;}
.sub_visual .m2_3 .img2 {background: url(../Images/new/sub2_img3.png) no-repeat;}
.sub_visual .m2_4 .img2 {background: url(../Images/new/sub2_img4.png) no-repeat;}
.sub_visual .m2_5 .img2 {background: url(../Images/new/sub2_img5.png) no-repeat;}