/************************************************************************
 * filename     : base.css
 * description  : 전체 공통 가이드
 * date         : 2013.07.21
************************************************************************/

*    {margin:0; padding:0;}
html  {height:100%;}
body {height:100%; overflow-y:scroll; * overflow-y:; color:#9e9e9e; font-size:12px; font-family:'돋움',dotum, sans-serif; line-height:18px; -webkit-text-size-adjust:none;} /* 전체기본 폰트 설정 및 배경색 */
a:link		{text-decoration:none; color:#9e9e9e;}
a:visited	{text-decoration:none; color:#9e9e9e;}
a:hover		{text-decoration:none; color:#000000;}
a:active	{text-decoration:none; color:#000000;}


img   {border:0;}
ul,	ol    {list-style:none;margin:0; padding:0;}

.clfix:after    {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
.clfix    {display: inline-block;}
.clfix    {display: block;}
* html .clfix    {height:1%;} /* Hides from IE-mac */
.clfix    {zoom:1;} /*for IE 5.5-7*/
label    {}
input	{vertical-align:middle}
input[type='text'], [type='password']{
	-webkit-border-radius:0; -webkit-appearance:none
}
input.txt    {height:16px; padding:4px 8px 2px; border:1px solid #a8a8a8; border-right-color:#e1e1e1; border-bottom-color:#e1e1e1; color:#4c4c4c; font-family:'돋움',dotum, sans-serif; font-size:12px; line-height:1.3}
input.txt:focus,
input.txt_on	 {height:16px; padding:4px 8px 2px; background:#fff; border:1px solid #ff771d; color:#4c4c4c; font-family:'돋움',dotum, sans-serif; font-size:12px; line-height:1.3}
input.nor    {height:16px; padding:7px 8px 6px; background:url('/twd/img/common/bg_input.png') no-repeat; border:1px solid #a8a8a8; border-right-color:#e1e1e1; border-bottom-color:#e1e1e1; color:#4c4c4c; font-family:'돋움',dotum, sans-serif; font-size:12px; line-height:1.3}
input.nor:focus,
input.nor_on	{height:16px; padding:7px 8px 6px; background:#fff; border:1px solid #ff771d; color:#4c4c4c; font-family:'돋움',dotum, sans-serif; font-size:12px; line-height:1.3}
input.txt_r    {height:16px; padding:4px 8px 2px; border:1px solid #a8a8a8; border-right-color:#e1e1e1; border-bottom-color:#e1e1e1; color:#4c4c4c; font-family:'돋움',dotum, sans-serif; font-size:12px; text-align:right; line-height:1.3}
input.txt_r:focus,
input.txt_r_on	 {height:16px; padding:4px 8px 2px; background:#fff; border:1px solid #ff771d; color:#4c4c4c; font-family:'돋움',dotum, sans-serif; font-size:12px; text-align:right; line-height:1.3}
input.chk    {margin:0 3px 0 5px; border:0 none; vertical-align:middle}
textarea	{padding:10px; border:1px solid #a8a8a8; border-right-color:#e1e1e1; border-bottom-color:#e1e1e1; color:#4c4c4c; ; font-family:'돋움',dotum, sans-serif; font-size:12px; line-height:1.5; resize:none; overflow-y:scroll}
select    {color:#4c4c4c; font-family:'돋움',dotum, sans-serif; font-size:12px;}
iframe.frame {width:100%; overflow:hidden;}
input.eng	{ime-mode:disabled;}


/**********************************************************
    레이아웃
 **********************************************************/

#outline { width:100%; background:url("/img/body_back_main_2.jpg") repeat-x 0 0;}
#outline-sub { width:100%; background:url("/img/body_back_01.jpg") repeat-x 0 0;}
#wrap { position:relative; width:1024px; margin:0 auto; }

/* header */
#header { position:relative; width:1024px; height:92px; text-align:center; }
#header .logo { margin-top:16px; }
#login-box { position:absolute; top:15px; right:0px; text-align:right; }
#kakao-box { position:absolute; top:40px; right:0px; text-align:center; width:295px; }

/* 톱메뉴 */
#tm-box { width:1024px; height:34px; text-align:center; padding-top:3px; }
#tm-navi { width:1000px; margin:0 auto; }
#tm-navi li { float:left; text-align:center; }
#tm-navi .depth1 { height:34px; width:140px; }
#tm-navi .space { float:right; }
#tm-navi .tm-sub { position:absolute; top:128px; left:0px; padding:20px 10px 30px 10px; width:1024px; background:url("/img/gnb/back_all_menu.png"); display:none; z-index:100; }
#tm-navi .tm-sub dt, dd { width:190px; margin-bottom:4px; text-align:left; }
#tm-navi .tm-sub li { float:left; }
#tm-navi .tm-sub dt a { font-size:14px; color:#ffffff; }
#tm-navi .tm-sub dd a:hover { color:#eeeeff; }
#tm-navi .sub1 { margin-left:34px;  }
#tm-navi .sub2 { margin-left:54px;  }
#tm-navi .sub3 { margin-left:290px;  }
#tm-navi .sub4 { margin-left:54px;  }
#tm-navi .sub5 { margin-left:54px;  }
#tm-navi .sub6 { margin-left:40px;  }
#tm-navi .sub6 dt { width:240px;  }
#tm-navi .sub7 { margin-left:874px;  }
#tm-navi .sub7 dt { width:200px;  }


/* 서비스 전체보기 */
#tm-full { position:absolute; top:129px; width:1024px; background:url("/img/gnb/back_all_menu.png"); z-index:10; }
#tm-full .toggle { position:absolute; bottom:-22px; left:812px; }
#tm-full .toggle img { cursor:pointer; }
#tm-full .navi-box { padding-bottom:20px; }
#tm-full .navi { width:1000px; margin:0 auto; }
#tm-full .navi li { float:left; width:140px; text-align:center; }
/* #tm-full .navi dl { margin-left:10px; } */
#tm-full .navi dt { font-size:11px; color:#ffffff; text-align:center; margin-top:4px; }
#tm-full .navi dt a { color:#ffffff; }
#tm-full .navi dt a:hover { color:#aaff00; }
#tm-full .navi dd { margin-left:5px; font-size:11px; }

/* 메인 */
#main-visual { clear:both; position:relative; width:1024px; height:350px;}
#main-contents { position:relative; width:1024px; height:507px; background:url('/img/main/back_contents_body2.jpg');  }
#main-contents .lbox { position:absolute; top:0px; left:0px;  width:366px; height:500px; background:url('/img/main/back_main_left_rolling.png'); }
#main-contents .rbox { position:absolute; top:0px; right:0px; width:658px; }
#image-list { position:absolute; top:206px; left:0px; padding:10px 0 0 11px; overflow:hidden; }
#main-banner { margin-top:30px; }
#main-banner li { float:left; width:204px; text-align:center; margin-bottom:30px; }
#f_text {clear:both;width:100%;height:40px;margin:0 auto;padding: 0px 0px 0px 0px;background-color:#fd7416}
#left_roll_img { position:absolute; top:420px; left:-160px; z-index:1; }
#main-board { margin-top:35px; }
#main-board li { float:left; width:218px; height:100px; text-align:center; }
#main-board .board { width:200px; margin:0 auto; }
#main-board .board li { text-align:left; width:200px; height:18px; margin-bottom:6px; }
#main-board .board .title {  margin-bottom:7px; border-bottom:solid 1px #cdc9bb; }
#main-board .board .title .more { float:right; }

/* 메인 롤링 */
#main-visual { position: relative; width:1024px; height:350px; overflow:hidden; }
#main-visual .mRoll {position: relative;  width:1024px; height:350px; }
#main-visual .mRoll li {position: absolute; left: 0; top: 0; font-size:0; line-height:0;}
#main-visual .mRoll-lbtn { position:absolute; top:160px; left:0; z-index:1;}
#main-visual .mRoll-rbtn { position:absolute; top:160px; right:0; z-index:1; }
#main-visual .mRoll-btn { position:absolute; bottom:20px; left:290px; z-index:1; width:444px; font-size:0; line-height:0; }
#main-visual .mRoll-btn li { float:left; width:148px; }

/* 서브 */
#sub-visual  { clear:both; width:1024px; height:299px;}
#sub-contents { position:relative; width:1024px; margin-top:18px; }
#sub-contents .contents-title { text-align:center; }
#sub-contents .lbox { float:left; width:250px; }
#sub-contents .rbox { float:right; width:750px; }

.tab-navi { width:1024px; height:31px; border-bottom:1px solid #d8d8d8;}
.tab-navi li { float:left; }
.tab-navi li.title { margin-right:30px; }
.tab-navi div { height:31px; display:table-cell; vertical-align:middle; }

/* Footer */
#online-qa { clear:both; width:1024px; margin:0 auto; padding-top:50px; }
#f_text { clear:both; }
#footer {clear:both;width:100%;height:200px;margin:0 auto;padding: 0px 0px 0px 0px;background-color:#747474}

/* 퀵메뉴 */
#quick-menu { position:absolute; top:150px; right:-100px; z-index:1000; }
#quick-menu li { margin-bottom:10px; }




/* 메인 롤링 배너용 CSS */
.clsBannerScreen {overflow: hidden;position: relative;height: 107px;width: 266px; border:0px solid #e1e1e1; cursor:pointer; clear:both;}
.clsBannerScreen .images {position:absolute; display:none; }
ul, li {list-style:none; margin:0; padding:0; font-size:10pt; }
.clsBannerButton {width:266px;cursor:pointer;border-bottom:1px solid #e1e1e1;}
.clsBannerButton li {width:100px;float:left;border-right:1px solid #e1e1e1;padding:2px;}
.clsBannerButton li.fir {border-left:1px solid #e1e1e1;}
.clsBannerButton li.labelOverClass {font-weight:bold;}