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

/* layout */
#wrap { width:100%; margin:40px auto 0; background:url(../images/main/bg_center.gif) repeat-x 0 100% }

/* 상단 메인 롤링 */
.uxPlanRolling {position: relative; width:100%; height:530px; background:#2a0c0e} 
.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:250px; left:20px; background-position:0 0; z-index:2;}
.uxPlanRolling .arrow a.next:hover {background-position:0 -50px;}
.uxPlanRolling .arrow .prev {top:250px; 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:530px; overflow:hidden; }
.uxPlanRolling .event_pic ul {position:relative; height:530px; }
.uxPlanRolling .event_pic li {position:relative; text-align:center;height:530px; }
.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 .event_pic li span { visibility:hidden}
.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:0px}

.uxBox { position:relative; clear:both; width:980px; margin:0 auto 45px; overflow:hidden}
.uxBox h3 { height:40px}
.uxStep {background:url(../images/main/bg_step.gif) no-repeat 0 0; height:210px;}
.uxStep h3 { position:absolute; right:0; top:0; width:290px; height:210px; background:url(../images/main/ttl_step.gif) no-repeat; text-indent:-9999px}
.uxStep ul { margin:35px 0 0 70px}
.uxStep li { color:#fff}
.uxStep li strong, .uxStep li span { display:block;}
.uxStep li strong { font-size:28px; height:40px}
.uxStep p.character { position:absolute; right:290px; top:0; width:220px; height:210px;  background:url(../images/main/step_charater.jpg) no-repeat}

/* uxPro */
#demo1.scroll-img ul{width: 1500px;}
.uxPro 	{position:relative; float:left; width:646px; height:340px; overflow:hidden}
.uxPro .arrow { }
.uxPro .arrow a {display:block; position:absolute; width:22px; height:22px; background:url('../images/main/arr_small.png') repeat-x 0 0;}
.uxPro .arrow a span {position:absolute; top:-5000px; left:-5000px; width:0; height:0; font-size:0; line-height:0; overflow:hidden;}
.uxPro .arrow .next {top:5px; right:30px; background-position:0 0; z-index:2;}
.uxPro .arrow a.next:hover {background-position:0 -30px;}
.uxPro .arrow .prev {top:5px; right:0px; background-position:-30px 0; z-index:2;}
.uxPro .arrow a.prev:hover {background-position:-30px -30px;}
.uxPro .scroll-img {position:relative; width:646px; height:300px; margin:0 auto; overflow:hidden;}
.uxPro .scroll-img ul {position:relative; height:300px; }
.uxPro .scroll-img li {display: inline-block; float:left; width:223px; height:300px;}
.uxPro li a { display:block; width:190px; height:290px; padding:5px; background-color:#e6e6e6; text-decoration:none }
.uxPro span, .uxPro strong, .uxPro i{ display:block; }
.uxPro span.img { height:160px; background-color:#fff}
.uxPro span.prodName { padding:10px; padding-right:5px;}
.uxPro li a span.prodName strong{ font-size:14px; color:#5d5d5d; line-height:20px; margin-bottom:7px}
.uxPro li a span.prodName i 		{ font-size:11px; color:#828383; line-height:16px; }
.uxPro li a:hover { background:#454545 url(../images/main/ico_pro_go.gif) no-repeat 50% 265px;}
.uxPro li a:hover span.prodName strong{ color:#fff; text-shadow:1px 1px 0 #1c1c1c  }
.uxPro li a:hover span.prodName i 		{ color:#d5d5d5;  }
.uxPro h3 .mark{ display:inline; padding-left:10px; }

.uxOnline {float:right; width:290px;line-height:18px}
.uxOnline p { margin-bottom:15px; }
.uxOnline p.btn {margin-bottom:25px}
.uxOnline dl.useGuide { background:url(../images/main/bg_useGuide.gif) no-repeat 0 0; height:171px; padding:0 0 0 20px}
.uxOnline dl.useGuide dt { text-indent:-9999px; height:60px}
.uxOnline dl.useGuide dd.goBtn { margin-top:40px; letter-spacing:-1px; font-size:12px}

.uxQuick li { float:left; width:180px; padding-left:100px; margin-left:40px; line-height:1.4em; min-height:85px}
.uxQuick li.mn01 { background:url(../images/main/quick_ico01.gif) no-repeat 0 0; margin-left:0}
.uxQuick li.mn02 { background:url(../images/main/quick_ico02.gif) no-repeat 0 0;}
.uxQuick li.mn03 { background:url(../images/main/quick_ico03.gif) no-repeat 0 0; width:240px;}
.uxQuick li strong { display:block; font-size:18px; color:#000; margin:10px 0}

.uxNews { margin-bottom:0 !important; height:280px; padding:35px 0 0 0}
.uxNews a:hover, .uxNews a:active, .uxNews a:focus{ color:#ec180b; }
.uxNews h3 { height:50px}
.uxNews .btnMore { position:absolute; right:0; top:0; width:23px;text-indent:-9999px}
.uxNews .btnMore a { display:block; height:23px ;background:url(../images/main/btn_more.gif) no-repeat 0 0;}
.uxNews .btnMore a:hover {background:url(../images/main/btn_more_over.gif) no-repeat 0 0;}
.uxNews span, 
.uxNews a { display:block; }
.uxNews span.date { color:#a09d92; margin-top:10px}
.uxNews li a { font-size:15px; line-height:20px; color:#5b5c5e}

.techBoxRolling 	{position:relative; float:left; width:290px; margin-right:40px}
.pressBox {position:relative; float:left; width:315px;}
.newsBox	{position:relative; float:right; width:290px;}

.techBoxRolling { display:inline;margin-right:40px; }
/* 
.techBoxRolling .controll{ position:absolute;right:0;top:10px;overflow:hidden;padding:1px;background:url('../images/main/bg_persona_btn.gif') right 1px no-repeat; }
.techBoxRolling .controll a{ display:block;float:left;text-indent:-5000em;overflow:hidden; }
.techBoxRolling .btn_play, 
.techBoxRolling .btn_stop{ display:none; width:13px;height:13px;background:url('../images/main/set_play.gif') no-repeat; }
.techBoxRolling .btn_stop{ background-position:0 -30px; }
.techBoxRolling .btn_prev, 
.techBoxRolling .btn_next{ width:12px;height:13px;background:url('../images/main/set_persona_arr.gif') no-repeat; }
.techBoxRolling .btn_prev{ margin-left:7px; }
.techBoxRolling .btn_next{ background-position:0 -30px;margin-left:16px; }
*/
.techBoxRolling .rolling_btn {position:absolute; right:0; top:7px; margin:0px; overflow:hidden; z-index:3;}
.techBoxRolling .rolling_btn li { float:left; margin:2px; list-style:none; cursor:pointer;}
.techBoxRolling .rolling_btn li a { padding:0px}

.techBoxRolling .slide{ position:relative;margin:0;overflow:hidden; }
.techBoxRolling .slide ul{  width:290px;height:190px ;overflow:hidden }
.techBoxRolling .slide ul li{ float:left; width:290px; height:190px }
.techBoxRolling .pic{ position:relative;display:inline-block;height:190px;overflow:hidden; }
.techBoxRolling .pic img{ display:block;width:290px; }

.uxNews.techBoxRolling a { color:#fff !important}
.techBoxRolling .pic .caption{ display:block;position:absolute;left:0;bottom:0;padding:13px 20px 11px 20px;word-break:break-all;background:url('../images/main/bg_board_off.png') 0 0 repeat; font-style:normal;color:#fff !important }

.pressBox li { margin-bottom:10px; height:90px}
.pressBox span.pic { float:left; width:90px; height:90px; margin-right:15px; background:#d4d4ce url(../images/main/bg_blank.gif) no-repeat 50% 50% }
.pressBox li a { font-weight:700; font-family:'NanumGothicBold'; width:270px; margin:0; padding-top:5px }
.newsBox li,
.pressBox li { clear:both;}
.newsBox li {margin-bottom:20px;}
.newsBox li a { font-weight:700; font-family:'NanumGothicBold'; font-size:14px}