@charset "utf-8";
/* Main Css */
@import url("../css/base.css");
@import url("../css/layout.css");

/* layout */
#wrap { width:100%; margin:0px auto;}
#content{ clear:both; float:none; position:relative; width:1000px;margin:0 auto; padding:30px 0 40px; height:240px }

/* 상단 메인 롤링 */
.uxPlanRolling {position: relative; padding-top:80px; width:100%; height:470px; background:#deeffb} 
.uxPlanRolling:after{content:"";	clear:both;	display:block;}
.uxPlanRolling .arrow {}
.uxPlanRolling .arrow a {display:block; position:absolute; width:41px; height:41px; background:url('../images/main/arr_big.png') repeat-x 0 0;}
.uxPlanRolling .arrow a span {position:absolute; top:-5000px; left:-5000px; width:0; height:0; font-size:0; line-height:0; overflow:hidden;}
.uxPlanRolling .arrow .next {top:320px; left:20px; background-position:0 0; z-index:2;}
.uxPlanRolling .arrow a.next:hover {background-position:0 -50px;}
.uxPlanRolling .arrow .prev {top:320px; right:20px; background-position:-55px 0; z-index:2;}
.uxPlanRolling .arrow a.prev:hover {background-position:-55px -50px;}
.uxPlanRolling .event_pic {position:relative; width:100%; height:470px; overflow:hidden; }
.uxPlanRolling .event_pic ul {position:relative; height:470px; }
.uxPlanRolling .event_pic li {position:relative; text-align:center;height:470px; }
.uxPlanRolling .event_pic li a,
.uxPlanRolling .event_pic li span { display:block; width:1000px; margin:0 auto; height:470px;vertical-align:middle;text-indent:-9999px }
.uxPlanRolling .event_pic li span { visibility:hidden}
.uxPlanRolling .event_pic li.pic1{ background:url(../images/main/popzone_img01.jpg) no-repeat 50% 0}
.uxPlanRolling .event_pic li.pic2{ background:url(../images/main/popzone_img02.jpg) no-repeat 50% 0}
.uxPlanRolling .event_pic li.pic3{ background:url(../images/main/popzone_img03.jpg) no-repeat 50% 0}
.uxPlanRolling .rolling_btn {position:absolute; left:50%; bottom:10px; width:100px; margin:0 0 0 -50px;overflow:hidden; z-index:3;}
.uxPlanRolling .rolling_btn li { float:left; margin:2px; list-style:none; cursor:pointer;}
.uxPlanRolling .rolling_btn li a { padding:5px 0px}

.uxBox {float:left; position:relative; height:200px; margin:0; padding:20px; }
.uxBox h3 { font:bold 18px/20px malgun,'NanumGothicBold'; height:35px; color:#436cb4;letter-spacing:-1px }

/* uxPro */
.uxPro 	{ width:310px; height:240px; padding:0; margin:0 40px 0 0; overflow:hidden}
.uxPro .arrow { display:none }
.uxPro .rolling_btn {position:absolute; right:0; top:10px; margin:0;}
.uxPro .rolling_btn li { float:left; margin:2px; list-style:none; cursor:pointer;}
.uxPro .rolling_btn li a { padding:0px}
.uxPro .event_pic {position:relative; width:100%; height:185px; overflow:hidden; }
.uxPro .event_pic li {position:relative;height:185px; }
.uxPro li a { display:block;}

.markBox {width:330px; padding:0; color:#555; }
.markBox li strong{display:block; font:bold 16px/18px malgun; height:25px; color:#414547; letter-spacing:-1px}
.markBox li a {display:block;text-decoration:none; padding:20px; height:65px; line-height:1.2em}
.markBox li.link01 { background:url(../images/main/bg_mark01.gif) no-repeat 0 0;}
.markBox li.link02 { background:url(../images/main/bg_mark02.gif) no-repeat 0 0; height:115px;}
.markBox li.link01 a:hover{ background:url(../images/main/bg_mark01_on.gif) no-repeat 0 0; }
.markBox li.link02 a:hover{ background:url(../images/main/bg_mark02_on.gif) no-repeat 0 0; height:115px;}
.markBox li span{ display:block; margin-top:10px; width:100px; background:url(../images/main/btn_link.gif) no-repeat 90px; font-size:12px; color:#f78b1f; font-weight:900;}

.bannerBox	{ float:right;width:280px; padding:0; height:240px; font-size:12px}
.bannerBox li strong{display:block;font:bold 16px/18px malgun; height:25px; color:#414547; letter-spacing:-1px}
.bannerBox li a {display:block;text-decoration:none; padding:20px;}
.bannerBox li.mn01 { background:url(../images/main/bg_banner01.gif) no-repeat 0 0;}
.bannerBox li.mn02 {background:url(../images/main/bg_banner02.gif) no-repeat 0 0;padding: 20px;height: 75px;}
.bannerBox li.mn01 a {height:65px}
.bannerBox li.mn01 strong {height:45px;}
.bannerBox li.mn02:hover { background-image:url(../images/main/bg_banner02_on.gif); }
.bannerBox li.mn02 .btn{margin-top:5px;}
.bannerBox li.mn02 .btn a { position:relative;padding: 3px 15px 3px 7px;display: inline-block;background: #4e82ce;color: #fff;border-radius: 3px;font-size: 11px;}
.bannerBox li.mn02 .btn a:before,
.bannerBox li.mn02 .btn a:after{ content:''; display:block; position:absolute; right:5px; top:50%; background:#fff; width:5px; height:1px; border-radius:5px;}
.bannerBox li.mn02 .btn a:before{ transform: rotate( 45deg ); margin-top:-2px;}
.bannerBox li.mn02 .btn a:after{ transform: rotate( -45deg );}
.bannerBox li.mn02 .btn a:hover{ background: #436cb4;}