@charset "utf-8";

/* Button */

.button { display: inline-block; text-decoration: none; -webkit-appearance: none; border:none; box-sizing: border-box; cursor: pointer; vertical-align: middle;  line-height: 38px; padding: 0 30px; height: 40px; text-align: center; font-size: 14px; }
.button i { vertical-align: -1px; }

.button.s {  line-height: 29px; padding: 0 15px; height: 32px;  }
.button.l  { line-height: 49px; padding: 0 40px; height: 52px; font-size: 16px; font-weight: bold; }

.button.textLink { font-weight: bold; color: #666; border-bottom: 1px solid #999; line-height: 24px; padding-left: 3px; font-size: 13px; }
.button.textLink:hover,
.button.textLink:focus { color: #333; border-color: #DB072F; }

.button.full { width: 100%; text-align: center; } 

.button.white { border:1px solid #ddd; color: #333; background: #fff; }
.button.white:hover,
.button.white:focus { border-color: #ccc; color: #000; }

.button.red { border:1px solid #DB072F; color: #fff; background:  #DB072F; }
.button.red:hover,
.button.red:focus { border-color: #e81212; color: #fff; }
.button.red:after  { opacity: 1 !important; }

.button.green { border:1px solid #7ac30e; color: #333; background:  #fff; }
.button.green:hover,
.button.green:focus { border-color: #66a900; color: #333; }
 

.button.transBlack { border:1px solid #444; color: #444; background:  transparent; }
.button.transBlack:hover,
.button.transBlack:focus { border-color: #444; color: #000; }
.button.transBlack:after  { opacity: 1 !important; }

.button.transWhite { border:1px solid #fff; color: #fff; background:  transparent; }
.button.transWhite:hover,
.button.transWhite:focus { border-color: #ffa100; color: #ffa100; }
.button.transWhite:after  { opacity: 1 !important; }

.button:after { font-family: xeicon;  width: 20px; height: 20px; margin-left: 10px; margin-right: -3px; vertical-align:middle; vertical-align: 0px; display: inline-block;  opacity: .5;  line-height: 20px;  }
.button:hover:after { opacity: 1; }
.button.more:after { content: ""; }
.button.link:after { content: ""; }
.button.download:after { content: ""; }
.button.viewer:after { content: ""; }
.button.check:after { content: ""; }
.button.list  {  }

.button.white:after { color: #DB072F; }

.buttonWrap { clear: both; overflow: hidden; margin-top: 30px; }

.buttonWrap.small { margin-top: 10px; }
.buttonWrap.medium { margin-top: 15px; }
.buttonWrap.large { margin-top: 20px;  }


.buttonWrap.alignLeft .button { margin-right: 15px; float: left; }
.buttonWrap.alignCenter .button { margin: 0 5px;  }
.buttonWrap.alignRight .button { margin-left: 15px;  }

/* Tab */

.tabs {display: table; border:1px solid #ccc;  width: 100%; margin-bottom: 30px; box-sizing: border-box}
.tabs  li { display: table-cell; border-left: 1px solid #ccc; width: 33%;}
.tabs  li:first-child { width: 34%; }
.tabs.col4  li { width: 25%; }
.tabs.col2 li { width: 50% }
.tabs.col5 li { width: 20% }
.tabs  li:first-child { border-left: none; }
.tabs  li  a { display: block; line-height: 50px; font-size: 16px; color: #333; text-align: center; white-space: nowrap; }
.tabs  li  a:hover, .tabs  li  a:focus { background: #eaecef;   }
.tabs  li.on a { background: #eaecef; font-weight: bold; color: #DB072F}

.tabContents > div { display: none; }
.tabContents > div.active { display: block; }


/*Pagination*/

#content .pagination { padding: 20px 0 0; overflow: hidden;  float: left;}
#content .pagination a { border:1px solid #ccc; float: left; text-align: center;  border-left: none; text-decoration: none; width: 30px;   height: 30px; line-height: 30px; font-size: 14px; font-family: 'roboto', sans-serif; color: #666; }
#content .pagination a:first-child { border-left: 1px solid #ccc; }
#content .pagination a.direction { width: auto; padding: 0 10px;  }
#content .pagination a.direction i { vertical-align: -1px; }
#content .pagination a:hover, .pagination a:focus {  background: #f4f4f4; }
#content .pagination a.current { background: #DB072F; border:1px solid #bc0000; color: #fff; }

.taC {text-align: center;}
.taL {text-align: left;}
.taR {text-align: right;}


/*BoardList*/



 /* Input */
.inputWrap { border:1px solid #ddd; padding: 20px 40px 40px; }
.inputTable { width: 100%;  border-top:2px solid #30313a; }
.inputTable th { text-align: left; line-height: 32px; padding: 10px; border-bottom: 1px solid #ddd; width: 120px; vertical-align: top; }
.inputTable td { padding: 10px;  border-bottom:1px solid #ddd }

.inputTable label {white-space: nowrap}


.telLayout {}
.telLayout td { padding: 0; border:none; width: 32% !important;  }
.telLayout td.space { width: 2% !important;  text-align: center; }
 
 .inlineSelect { border:1px solid #ccc; min-width: 120px; line-height: 24px;  border-radius: 0;  background: #fff; color: #333;}
 
  .selectInput { min-width: 200px; border:1px solid #ccc; line-height: 30px; display: inline-block; height: 32px; padding:  0 10px; border-radius: 0 !important;    box-sizing: border-box; vertical-align: middle; }
    .selectInput.auto { width: auto;  min-width: 100px !important;  }
 .textInput { border:1px solid #ccc; line-height: 20px; display: inline-block; height: 32px; padding: 5px 10px !important;  width: 100%; box-sizing: border-box;  vertical-align: middle; }
  .textInput.w200 { width: 200px; }
  .textInput.readonly { background: #eee; }
 textarea.textInput { height: auto; }
 
.inputText { line-height: 32px;  }
 
.agreeWrap { border:1px solid #ccc; line-height: 20px; display: inline-block;  font-size: 13px; color: #555; padding: 5px 10px;  width: 100%; box-sizing: border-box; height: 120px; overflow-y: scroll; background: #eee; margin-bottom: 10px;    }
 
.inquiryComplete { width: 100%;   margin: 0 auto 40px; max-width: 640px; box-sizing: border-box;    }
.inquiryComplete .completeMessage { text-align: center; font-size: 24px; margin: 20px 0 40px; }
.inquiryComplete .completeMessage i { display: block; text-align: center; }

.krZip {  }
.krZip > div { position: relative;  overflow: hidden; padding-left: 60px;}
.krZip > div > label { position: absolute; display: block; height: 32px; width: 50px; left:0px; top:0px; line-height: 32px; font-size: 12px; color: #666; }
.krZip > div .textInput { height: 32px; }

.krzip-postcode-wrap { margin-bottom: 10px; }

.krzip-address-wrap .textInput { margin-bottom: 5px;  }
.krzip-detailAddress-wrap { margin-top: 5px; }
.krzip-extraAddress { display: none; }

 
 /* MobileScroll - 가로가 긴 항목들을 모바일에서 가로스크롤로 볼수 있도록 */

 
 

br.mobile {
    display: none;
}
br.pc {
    display: inline;
}

/*  툴팁 */

.tooltip {
	display:none;
	position:absolute;
 
	background-color:#DB072F;
	padding:5px 10px;
	color:#fff;
	font-size:12px !important;
	
}


@media only screen and (max-width: 740px){
	    br.mobile {
        display: inline;
    }
    br.pc {
        display: none;
    }
    .tabs  li  a { font-size: 14px; }
    .inputTable th, .inputTable td{ display: block; width: 100%; box-sizing: border-box; padding:  0 0 20px !important }
    .inputTable th {border-bottom: 0; padding:10px 0 0 !important;}
    .telLayout tr > td {padding-bottom: 0 !important}
    .inputWrap {padding: 10px}
   	.selectInput {width: 100%;} 
   
    .telLayout td {display: table-cell;}
    	.mobileScrollWrap { overflow-y:scroll;  margin-right: -15px; margin-left: -15px; position: relative; }
 
	.mobileScrollWrap .inner { width: 720px; padding: 0d 15px;}


}

@media only screen and (max-width: 479px){
	
	.buttonWrap .button { width: 100%; margin: 10px 0 0 !important; }
	.buttonWrap .button:first-child { margin-top: 0; }
    .tabs  li  a { font-size: 13px; }
    

    
}