@charset "utf-8";
/****************************************/
/* Name:
/* PART: COMMON STYLE
/* Version: 1.0
/* Author: 최경락(Jerrold), 이나현(Cindy)
/****************************************/

/*/asset/ui/css/common.css*/

@import url(base.css);
@import url(content.css);
@import url(layout.css);
/*@import url(en_style.css);*/
/*@import url(ch_style.css);*/

/* 말줄임 */
.ellipsis {white-space:nowrap; overflow:hidden; word-break:break-all; text-overflow:ellipsis; -o-text-overflow: ellipsis; /*-moz-binding: url('ellipsis.xml#ellipsis');*/ vertical-align:middle; display:inline-block;}
.ellipsis_multiple1 {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-wrap:break-wrod;}
.ellipsis_multiple2 {overflow:hidden !important; text-overflow:ellipsis !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical !important; word-wrap:break-wrod !important;}
.ellipsis_multiple3 {overflow:hidden !important; text-overflow:ellipsis !important; display:-webkit-box !important; -webkit-line-clamp:3; -webkit-box-orient:vertical !important; word-wrap:break-wrod !important;}
.ellipsis_multiple4 {overflow:hidden !important; text-overflow:ellipsis !important; display:-webkit-box !important; -webkit-line-clamp:4; -webkit-box-orient:vertical !important; word-wrap:break-wrod !important;}

/* common */
.hide {display:none !important;}
.iblock {display:inline-block !important;}
.show, .block {display:block !important;}
.float_n {float:none !important;}
.float_l {float:left !important;}
.float_r {float:right !important;}
.align_l {text-align:left !important;}
.align_c {text-align:center !important;}
.align_r {text-align:right !important;}
.align_t {vertical-align:top !important;}
.align_m {vertical-align:middle !important;}
.align_b {vertical-align:bottom !important;}
.font_nomal {font-weight:400 !important;}s
.nodata {}

/* margin */
.maA0 {margin:0px !important;}

.maT0 {margin-top:0px !important;}
.maT15 {margin-top:15px !important;}
.maT16 {margin-top:16px !important;}
.maT17 {margin-top:17px !important;}
.maT20 {margin-top:20px !important;}
.maT30 {margin-top:30px !important;}
.maT33 {margin-top:33px !important;}
.maT35 {margin-top:35px !important;}
.maT37 {margin-top:37px !important;}
.maT38 {margin-top:38px !important;}
.maT40 {margin-top:40px !important;}
.maT55 {margin-top:55px !important;}
.maT59 {margin-top:59px !important;}
.maT60 {margin-top:60px !important;}
.maT70 {margin-top:70px !important;}

.maL0 {margin-left:0px !important;}
.maL6 {margin-left:6px !important;}
.maL10 {margin-left:10px !important;}

.maB0 {margin-bottom:0px !important;}
.maB7 {margin-bottom:7px !important;}
.maB15 {margin-bottom:15px !important;}
.maB20 {margin-bottom:20px !important;}
.maB30 {margin-bottom:30px !important;}
.maB40 {margin-bottom:40px !important;}


.maR0 {margin-right:0px !important;}

/* padding */
.paA0 {padding:0 !important;}

.paT0 {padding-top:0px !important;}
.paT12 {padding-top:12px !important;}
.paT14 {padding-top:14px !important;}
.paT25 {padding-top:25px !important;}
.paT29 {padding-top:29px !important;}
.paT30 {padding-top:30px !important;}
.paT32 {padding-top:32px !important;}
.paT37 {padding-top:37px !important;}
.paT51 {padding-top:51px !important;}
.paT52 {padding-top:52px !important;}
.paT58 {padding-top:58px !important;}
.paT59 {padding-top:59px !important;}
.paT78 {padding-top:78px !important;}
.paT79 {padding-top:79px !important;}

.paL0 {padding-left:0px !important;}

.paB0 {padding-bottom:0px !important;}

.paR0 {padding-right:0px !important;}


/*****************************
    button
*****************************/
.brnArea{text-align:center;}
.brnArea.taL{text-align:left;}
.brnArea.taR{text-align:right;}
.btnD{display:inline-block; width:auto; min-width:48px; height:30px; padding:0 15px; font-size:12px; color:#212121; line-height:30px; text-align:center; background:#fff; border:1px solid #d3d3d3;}
.btnD.raised {min-width:97px; height:48px; padding:0 10px; line-height:47px; font-weight:bold;}
.gray {background:#f7f7f7;}
.dark {border-color:#666; color:#fff; background:#666;}
.black {border-color:#222; color:#fff; background:#222;}
.btnD.full {width:100%; min-width:100%; box-sizing:border-box;}
.btnD.middle {height:36px; padding:0 19px; line-height:36px;}
.btn_more {display:inline-block; padding-right:12px; color:#666666; line-height:1.0; font-size:11px; background:url("../img/arrew_bottom01.png") no-repeat right 4px;}
.btn_more.active {}

/* .ellipsis */
.ellipsis {overflow:hidden !important; display:inline-block !important; white-space:nowrap; word-break:break-all; text-overflow:ellipsis; -o-text-overflow: ellipsis; vertical-align:middle;}

/* border */
.borderL {border-left:1px solid #f0f0f0;}
.borderT {border-top:1px solid #f0f0f0;}
.borderTn {border-top:none !important;}

/*****************************
    PAGING STYLE
*****************************/
.paging {text-align:center; color:#999;}
.paging a,
.paging span {display:inline-block; overflow:hidden; height:17px; margin:0px 10px; font-size:11px; line-height:17px; letter-spacing:0; cursor:pointer; color:#999;}
.paging a.on,
.paging span.on {color:#212121;}
.paging a:first-child {margin-left:0;}
.paging a.first, .paging a.prev, .paging a.next, .paging a.last {position:relative; width:17px; height:17px; text-indent:-10000em; background:url(../img/paging.png) no-repeat;}
.paging a.first{margin:0px 5px; background-position:0 4px;}
.paging a.last{margin:0px 5px;background-position:-53px 4px;}
.paging a.prev{background-position:-18px 4px;}
.paging a.next{background-position:-34px 4px;}
/*.paging a.first:hover{background-position:0 -52px;}
.paging a.last:hover{background-position:-54px -52px;}
.paging a.prev:hover{background-position:-18px -52px;}
.paging a.next:hover{background-position:-36px -52px;}
.paging a.first.off:hover{background-position:0 -34px;}
.paging a.last.off:hover{background-position:-54px -34px;}
.paging a.prev.off:hover{background-position:-18px -34px;}
.paging a.next.off:hover{background-position:-36px -34px;}*/

/*****************************
    TAB STYLE
*****************************/
.tabArea {width:100%; text-align:center;}
.tabArea .tab {overflow:hidden; position:relative; font-size:0; line-height:0;}
.tabArea .tab li {display:inline-block; min-width:180px; padding-bottom:4px;}
.tabArea .tab li a {display:block; height:29px; padding:9px 0 0 0; color:#999; font-size:16px; line-height:1.3; text-align:center; border-bottom:1px solid #cccccc; font-family: "돋움","굴림"; letter-spacing: -0.05em;}
.tabArea .tab li.active {background:url("../img/arrew_tab.png") no-repeat center bottom;}
.tabArea .tab li.active a {color:#212121; border-bottom:1px solid #212121;}

.tabArea .tab2 {overflow:hidden; position:relative; font-size:0; line-height:0;}
.tabArea .tab2 li {display:inline-block; min-width:25%; padding-bottom:4px;}
.tabArea .tab2 li a {display:block; height:29px; padding:9px 0 0 0; color:#999; font-size:15px; line-height:1.3; text-align:center; border-bottom:1px solid #cccccc; font-family: "돋움","굴림"; letter-spacing: -0.05em;}
.tabArea .tab2 li.active {background:url("../img/arrew_tab.png") no-repeat center bottom;}
.tabArea .tab2 li.active a {color:#212121; border-bottom:1px solid #212121;}
.js_tab_con {display:none;}

/*****************************
 input[type=text]
 input[type=password]
 input[type=checkbox]
 input[type=radio]
 select
 textarea
*****************************/
/* Placeholder Color Set */
::-webkit-input-placeholder {color:#cccccc; opacity:1 !important;}
 :-moz-placeholder {color:#cccccc !important;}
::-moz-placeholder {color:#cccccc !important;}
 :-ms-input-placeholder {color:#cccccc !important;}

/* input[type=text], input[type=password] */
.textbox {position: relative; display:inline-block; width:200px; background:#fff;}
.textbox label {position: absolute; top: 1px; left: 1px; padding: .5em 15px; color:#ccc; font-size: 12px; cursor: text;}
.textbox label.active,
.textbox label.disabled {color:#666666;}
.textbox button {
  display:none;
  position: absolute;
  top: 1px;
  right: 9px;
  margin: .5em 0px;
  overflow:hidden; text-indent:10000em;
  width:18px; height:18px; background:url("../img/btn_clear.png") no-repeat 3px 3px; cursor: pointer;
}
.textbox .icoSuited {
  display:none;
  position: absolute;
  top: 1px;
  right: 9px;
  margin: .5em 0px;
  overflow:hidden; text-indent:10000em;
  width:18px; height:18px; background:url("../img/icon_icoSuited.png") no-repeat 2pc 4px;
}
.textbox a.search {
  display:block;
  position: absolute;
  top: 1px;
  right: 9px;
  margin: .5em 0px;
  overflow:hidden; text-indent:10000em;
  width:18px; height:18px; background:url("../img/btn_search.png") no-repeat 3px 3px; cursor: pointer;
}
.textbox.suited button {display:none !important;}
.textbox.suited .icoSuited {display:block;}
.textbox input[type="text"],
.textbox input[type="password"] {
 position: relative;
 background: none;
 border: 1px solid #d3d3d3;
 font-size: 12px;
 width: 100%;  /* 원하는 너비 설정 */
 height: auto;  /* 높이값 초기화 */
 line-height : normal;  /* line-height 초기화 */
 padding: .5em 15px; /* 원하는 여백 설정, 상하단 여백으로 높이를 조절 */
 font-family: inherit;  /* 폰트 상속 */
 border-radius: 0;  /* iSO 둥근모서리 제거 */
 outline-style: none;  /* 포커스시 발생하는 효과 제거를 원한다면 */
 -webkit-appearance: none;  /* 브라우저별 기본 스타일링 제거 */
 -moz-appearance: none;
}
.textbox.raised{}
 .textbox.raised label {
   padding: .8em 20px;  /* input 요소의 padding 값 만큼 */
 }
 .textbox.raised button {
  top: 4px;
}
 .textbox.raised input[type="text"],
 .textbox.raised input[type="password"] {
   font-size: 13px;
   padding: .8em 20px; /* 원하는 여백 설정, 상하단 여백으로 높이를 조절 */
}
/* textarea */
.textCont {position:relative;}
.textCont textarea {width:790px; height:110px; line-height:20px;}
.textCont .textLabel{margin:0 10px 0 0; font-size:12px; color:#ccc; line-height:20px; top:15px; left:15px; cursor:pointer;}
.textContBox {margin:0; padding:15px; vertical-align:middle; background:transparent; border:solid 1px #d3d3d3; border-radius:0; overflow-y:auto; outline:0; -moz-border-radius:0; -webkit-border-radius:0; box-sizing:border-box; -moz-box-sizing:border-box; resize:none; position:relative;}

/* width */
.sizeAuto {width:auto !important;}
.size0 {width:0px !important;}
.size100 {width:100px !important;}
.size333 {width:333px !important;}
.size354 {width:354px !important;}
.size370 {width:370px !important;}
.size375 {width:375px !important;}
.size388 {width:388px !important;}
.size750 {width:750px !important;}

.sizeP50 {width:50% !important;}

/* height */
.sizeH0 {height:0px !important;}
.sizeH580 {height:580px !important;}

/* color */
.color_grey01 {color:#666666 !important;}
.color_grey02 {color:#999999 !important;}
.color_grey03 {color:#cccccc !important;}
.color_black01 {color:#000000 !important;}
.color_black02 {color:#212121 !important;}
.color_red01 {color:#d10011 !important;}
.color_white01 {color:#fff !important;}

/* underline */
.underline {text-decoration:underline;}
.underline:hover,.underline:active,.underline:focus {text-decoration:underline;}

/* select */
.selectbox {
 position: relative;
 display:inline-block;
 width: 198px;  /* 너비설정 */
 min-height:32px;
 border: 1px solid #d3d3d3;  /* 테두리 설정 */
 z-index: 1;
 -webkit-box-sizing:border-box; box-sizing: border-box;
}

.selectbox:before {  /* 화살표 대체 */content: ""; position: absolute; top: 50%; right: 10px; width: 0;
height: 0; margin-top: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #333;}
.selectbox label {position: absolute; top:1px; left:5px; padding:.5em 31px .5em 15px; color: #ccc; font-size: 12px; z-index: -1;}
.selectbox select {width: 100%; height: 100%; font-size:13px; line-height: normal; font-family: inherit; padding: .5em 41px .4em 15px; -webkit-padding-before:.6em; -webkit-padding-end:41px; -webkit-padding-after:.6em; -webkit-padding-start:15px; border: 0; opacity: 0; filter:alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; color:#999;}
.selectbox.active label,
.selectbox.active select {
  color:#666666;
}
.selectbox.raised label {
  padding: .7em 31px .7em 15px;  /* select의 여백 크기 만큼 */
}
.selectbox.raised select {
  padding: .7em 31px .7em 15px;  /* 여백과 높이 결정 */
}

/* input[type=checkbox] */
.checks {position: relative; display:inline-block;}
.checks input[type="checkbox"] {/* 실제 체크박스는 화면에서 숨김 */position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0}
.checks input[type="checkbox"] + label {display: inline-block; position: relative; padding-left: 30px;  /* 글자와 체크박스 사이의 간격을 변경 */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */content: ''; position: absolute; left: 0; top: 0px;  /* 이 값을 변경해서 글자와의 정렬 */ width: 14px;  /* 체크박스의 너비를 지정 */ height: 14px;  /* 체크박스의 높이를 지정 */ line-height: 14px; /* 세로정렬을 위해 높이값과 일치 */ text-align: center; background: #fff; border: 1px solid #d3d3d3;}
.checks input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */ content: '\2714';  /* 체크표시 유니코드 사용 */ color: #222; background: #fff; border-color: #222;}

/* input[type=radio] */
.checks {position: relative;}
.checks input[type="radio"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip:rect(0,0,0,0); border: 0;}
.checks input[type="radio"] + label {display: inline-block; position: relative; padding-left: 30px;
cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.checks input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: 0px; width: 14px; height: 14px; text-align: center; background: #fff; border: 1px solid #d3d3d3; border-radius: 100%;}
.checks input[type="radio"]:checked + label:before {background: #fff; border-color: #222;}
.checks input[type="radio"]:checked + label:after {content: ''; position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; background: #222; border-radius: 100%;}

/* 체크박스 */
.checkbox {display:inline-block; position:relative; height:16px; }
.checkbox label {display:inline-block; position:relative; padding-left:25px; white-space: nowrap; line-height:1.3; color:#666666; cursor:pointer; vertical-align:middle;}
.checkbox label:after {display:block; position:absolute; top:2px; left:0; background:url('../../../images/common/form_checkbox.gif') 0 0 no-repeat;  width:16px; height:16px; content:"";}
.checkbox label input {display:none; margin-top:-2px; margin-left:-10px; opacity:0; filter: alpha(opacity=0); cursor:pointer;}
.checkbox.checked label {color:#111;}
.checkbox.checked label:after {background-position:-16px 0; }

/* 라디오 */
.radio {display:inline-block; position:relative; height:16px; margin-right:10px;}
.radio label {display:inline-block; position:relative; padding-left:25px; white-space: nowrap; line-height:1.3; color:#888; cursor:pointer; vertical-align:middle;}
.radio label:after {display:block; position:absolute; top:2px; left:0; background:url('../../../images/common/form_radio.gif') 0 0 no-repeat;  width:16px; height:16px; content:"";}
.radio label input {position: absolute; top: 0; left: 0; margin-top:-2px; margin-left:-10px; opacity:0; filter: alpha(opacity=0); cursor:pointer;}
.radio.checked label {color:#111;}
.radio.checked label:after {background-position:-16px 0; }
.radio label div {margin-top:-4px;}