@charset "utf-8";

/*---------------------------------------------------------------------------------------------------------------------------------------
	File : ui_style.css
	Company : The Webstyle co.,ltd
	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, font/color, align, etc
	공통선언방법 : Common(기본값), Design(디자인), Detail(상세유형)
-----------------------------------------------------------------------------------------------------------------------------------------*/

/* Link */
a {color:#111; text-decoration:none;}
a:hover, a:active, a:visited {color:#111;}

/* Input, Select */
input[type=text],
input[type=password],
select {
	height:47px;
	padding:10px 10px;
	border:1px solid #e3e3e3;
	font-size:14px; 
	color:#333;
	background-color:#ffffff;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
}
select + select {margin-left:5px;}
input[type=password] {font-family:"NotoSans-Regular";}

/* Placeholder Color */
:-ms-input-placeholder 		{font-family:"NotoSans-Light"; color:#999 !important;} /* IE 10 + */
::-webkit-input-placeholder {font-family:"NotoSans-Light"; color:#999;} /* Webkit Browser */
:-moz-placeholder 			{font-family:"NotoSans-Light"; color:#999;}	/* Mozilla Firefox 4 to 18*/
::-moz-placeholder 			{font-family:"NotoSans-Light"; color:#999;} /* Mozilla Firefox 19+ */

/* Select - Default */
select {padding:10px 45px 10px 10px; background:url('../../images/common/ico_select_arrow.png') right center no-repeat;}
select::-ms-expand {display:none;}

textarea {padding:20px 15px; font-size:14px; border:1px solid #e3e3e3; resize:none;}

/* size */
.size-basic {width:241px;}
.size-xsm {width:91px;}
.size-xsm2 {width:81px;}
.size-sm {width:101px;}
.size-md {width:111px;}
.size-md2 {width:145px;}
.size-md3 {width:90px;}
.size-lg {width:364px;}
.size-full {width:100%;}

/* UI Input File */
.ui-input-file {display:inline-block; position:relative; padding-right:85px;}
.ui-input-file:after {
	content:"첨부파일";
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px;
	min-width:72px;
	height:36px;
	border:1px solid #dedede;
	padding:0 15px;
	border-radius:5px;
	font-size:13px;
	line-height:34px;
	color:#606060;
	background-color:#fff;
}
.ui-input-file input[type=file] {position:absolute; top:0px; left:0px; z-index:1; width:100%; height:100%; opacity:0;}
.ui-input-file .input_filePath {width:100%;}

/* UI Input Date */
.ui-input-date {display:inline-block; position: relative;}
.ui-input-date .btn_datepicker {position: absolute; right: 10px; top:5px;}
.ui-input-date .btn_datepicker .ico_date {
	display:inline-block;
	width:24px;
	height:24px;
	text-indent:-9999px;
	background:url('../../images/common/ico_datepicker.png');
}

/* UI Checkbox */
.ui-checkbox {
	display:inline-block;
	position:relative;
	width:170px;
	font-size:16px;
	line-height:18px;
	color:#666;
	letter-spacing:-1px;
	vertical-align:middle;
}
.ui-checkbox input {display:none;}
.ui-checkbox input+span {
	display:inline-block;
	position:relative;
	top:-2px;
	width:18px;
	height:18px;
	margin-right:6px;
	vertical-align:middle;
	background:url('../../images/common/ui_checkbox.png') left top no-repeat;
}
.ui-checkbox input:checked+span {background-position:right top;}
.ui-checkbox.type2 input + span {background:url('../../images/common/ui_checkbox2.png') left top no-repeat;}
.ui-checkbox.type2 input:checked+span {background-position:right top;}

.ui-group-checkbox {position:relative;}
.ui-group-checkbox:after {content:""; display:block; clear:both;}
.ui-group-checkbox .ui-checkbox {margin-right:30px;}
.ui-group-checkbox.three-up .ui-checkbox {float:left;}
.ui-group-checkbox.three-up .ui-checkbox:nth-child(3n) {margin-right:0px;}

/* Checkbox - type1 */
.check-wrap {display:inline-block; position:relative; vertical-align:middle; font-size:0;}
.check-wrap label > input[type="checkbox"], input[type="radio"] {display:none; opacity:0;}
.check-wrap label > span {display:inline-block; position:relative; width:150px; height:50px; border:1px solid #d6d6d6; border-left:none; background-color:#f7f7f7; font-size:16px; line-height:50px; color:#666; text-align:center; z-index:1;}
.check-wrap label:first-child > span {border-left:1px solid #d6d6d6;}
.check-wrap label > input[type="checkbox"]:checked + span {border:1px solid #d6d6d6; border-left:none; background-color:#fff; font-family:"NanumSquareOTFB"; color:#111;}
.check-wrap label > input[type="radio"]:checked + span {border:1px solid #d6d6d6; border-left:none; background-color:#fff; font-family:"NanumSquareOTFB"; color:#111;}
.check-wrap label:first-child > input[type="checkbox"]:checked + span {border-left:1px solid #d6d6d6;}
.check-wrap label:first-child > input[type="radio"]:checked + span {border-left:1px solid #d6d6d6;}
.check-wrap + .check-wrap {margin-top:10px;}


/* UI Radio */
.ui-radio {
	display:inline-block;
	position:relative;
	font-size:16px;
	line-height:18px;
	color:#737373;
	letter-spacing:-1px;
	vertical-align:middle;
}
.ui-radio input {display:none;}
.ui-radio input+span {
	display:inline-block;
	position:relative;
	top:-2px;
	width:18px;
	height:18px;
	margin-right:6px;
	vertical-align:middle;
	background:url('../../images/common/ui_radio.png') left top no-repeat;
}
.ui-radio input:checked+span {background-position:right top;}

/* Radio - type2 */
.radio-wrap {display:inline-block; position:relative; vertical-align:middle;}
.radio-wrap label > input[type="radio"] {display:none; opacity:0;}
.radio-wrap label > span {display:inline-block; position:relative; height:50px; padding:0 25px; border:1px solid transparent; border-radius:3px; background-color:#eee; font-size:16px; line-height:50px; z-index:1;}
.radio-wrap label > input[type="radio"]:checked + span {border:1px solid #e31937; background-color:#fff;}
.radio-wrap.p15 label > span {padding:0 15px;}
.select-wrap {display:inline-block;}
.select-wrap.w175 select {width:175px;}
.select-wrap.w185 select {width:185px;}


/* Button */
button {overflow:visible; padding:0px; border:0px; font-weight:normal; cursor:pointer; outline:none; background-color:transparent;}
button::-moz-focus-inner {border:0px; padding:0px;}

.btn {position:relative; display:inline-block; font-family:"NanumSquareOTFR"; text-align:center; white-space:nowrap; vertical-align:middle; cursor:pointer; opacity:1;}
.btn > span {display:inline-block; position:relative;}
.btn > span > .ico {position:relative; top:-1px;}
.btn:hover {transition-property:background-color, color ,opacity; transition-duration:0.5s; transition-timing-function:ease-out;}

.btn > span.ico-only {font-size:0px;}
.btn > span.ico-only:before {font-size:14px;}
.btn > span.ico:before {margin-right:5px;}

.btn-wrap {text-align:center;}
.btn-wrap:after {content:""; display:block; clear:both;}
.btn-wrap .btn-left {display:inline-block; float:left;}
.btn-wrap .btn-right {display:inline-block; float:right;}
.btn-wrap.two-up .btn {width:200px; margin:0 6px; text-align:center;}
.btn-wrap.two-up2 .btn {width:160px; margin:0 6px; text-align:center;}
.btn-wrap.two-up3 .btn {display:block; width:160px; float:right; text-align:center;}

.btn-sm {height:30px; padding:0 17px; font-size:14px; line-height:28px; border-radius:3px;}
.btn-sm2 {height:36px; padding:0 22px; font-family:"NanumSquareOTFR"; font-size:14px; line-height:34px; border-radius:3px;}
.btn-md {height:46px; /*padding:0 16px;*/ font-size:16px; line-height:37px; border-radius:3px; letter-spacing:-1px;}
.btn-md2 {height:46px; padding:0 38px; font-size:16px; line-height:37px; border-radius:3px; letter-spacing:-1px;}
.btn-md3 {height:46px; padding:0 65px; font-size:16px; line-height:44px; border-radius:3px; letter-spacing:-1px;}
.btn-md4 {height:46px; padding:0 38px; font-size:16px; line-height:44px; border-radius:3px; letter-spacing:-1px;}
.btn-lg {height:60px; padding:0 35px; font-size:18px; line-height:58px; border-radius:3px;}

.btn-black	   {color:#ffffff !important; border:1px solid #333333; background-color:#333333;}
.btn-gray {color:#666666; border:1px solid #c6c6c6; background-color:#eeeeee;}
.btn-gray2 {color:#111111; background-color:#eeeeee;}
.btn-red {color:#ffffff !important; border:1px solid #e31937; background-color:#e31937;}
.btn-grayLine {color:#111111; border:1px solid #afafaf; background-color:#ffffff;}
.btn-grayLine2 {color:#fff; border:1px solid #b9b9b9; background-color:#535353;}
.btn-grayLineYellow {color:#111; border:1px solid #b9b9b9; background-color:#ffcf3f;}
.btn-brownLine {color:#625a5a; border:1px solid #625a5a; background-color:#ffffff;}
.btn-red_txt{color:#e31937 !important;}

.btn-flat {float:left; width:100%; height:38px; border:0; font-size:14px; line-height:36px; background-color:transparent;}
.btn-flat + .btn-flat {border-left:1px solid #ccc;}
.btn-flat.btn-red {color:#cf152d !important;}
.btn-flat.btn-gray {color:#666;}


.btn-inqury {width:193px; height:60px; font-size:18px; line-height:58px; border-radius:4px;}
.btn-inqury + .btn-inqury {margin-left:5px;}

/* Icon */
.ico {display:inline-block; vertical-align:middle; text-indent:-9999em;}


/* Tab */
.tab-wrap {position:relative;}
.tab {position:relative;}
.tab:after {content:""; display:block; clear:both;}
.tab li {float:left; position:relative;}
.tab.two-up li {width:50%;}

.tab-type1 {margin-bottom:70px;}
.tab-type1 .tab li {border-left:2px solid #dcdcdc;}
.tab-type1 .tab li:first-child {border-left:0px;}
.tab-type1 .tab li a {display:block; height:123px; border-bottom:2px solid #dcdcdc; font-size:32px; line-height:121px; text-align:center; background-color:#f2f2f2;}
.tab-type1 .tab li a span {display:inline-block; color:#111; opacity:0.75;}
.tab-type1 .tab li.on a {border-bottom:0px; background-color:#fff;}
.tab-type1 .tab li.on a span {opacity:1;}

.tab-container {position:relative;}
.tab-container-layer .tab-content {display:none;}
.tab-container-layer .tab-content.on {display:block;}

/* 탭 */
.tab-type-shop {overflow:hidden;}
.tab-type-shop .in-sec {margin-right:-3px;}
.tab-type-shop a {display:block; position:relative; float:left; width:25%; height:49px; border:1px solid #ccc; border-bottom-color:#111; color:#666; font-family:'NanumSquareOTFR'; font-size:16px; text-align:center; line-height:47px;}
.tab-type-shop a:after {display:block; clear:both; content:'';}
.tab-type-shop a ~ a {margin-left:-1px;}
.tab-type-shop a:first-child {border-left:none;}
.tab-type-shop a:last-child {border-right:none;}
.tab-type-shop .on {border-color:#111; border-bottom:none; color:#111; z-index:10;}

.tab-type2 {margin-bottom:70px; text-align:center;}
.tab-type2 .tab {margin-right:-2px;}
.tab-type2 .tab:after {display:block; clear:both; content:'';}
.tab-type2 .tab li {float:left; width:50%; margin-left:-1px; border:1px solid #d6d6d6; background:#f7f7f7;}
.tab-type2 .tab li:firsrt-child {margin-left:0;}
.tab-type2 .tab li a {display:block; height:50px; color:#666; font-size:16px; line-height:48px;}
.tab-type2 .tab li.on {border-bottom-color:#fff; background:#fff;}
.tab-type2 .tab li.on a {color:#111; font-family:'NanumSquareOTFB';}

.tab-type3 {margin-bottom:70px; text-align:center;}
.tab-type3 .tab {margin-right:-2px;}
.tab-type3 .tab:after {display:block; clear:both; content:'';}
.tab-type3 .tab li {float:left; width:33.333333%; margin-left:-1px; border:1px solid #d6d6d6; background:#f7f7f7;}
.tab-type3 .tab li:firsrt-child {margin-left:0;}
.tab-type3 .tab li a {display:block; height:50px; color:#666; font-size:16px; line-height:48px;}
.tab-type3 .tab li.on {border-bottom-color:#fff; background:#fff;}
.tab-type3 .tab li.on a {color:#111; font-family:'NanumSquareOTFB';}
.tab-type3.leng2 .tab {margin-right:0;}
.tab-type3.leng2 .tab li {width:50%;}
.tab-type3.leng4 li {width:25%;}
.tab-type3.leng5 li {width:20%;}
.tab-type3.leng7 li {width:14.285%;}

.tab-container .tab-content {display:none;}
.tab-container .tab-content.on {display:block;}

/* bullet */
.bul > li:before, .bul > p:before, dt.bul:before, dd.bul:before {content:''; display:block; position:absolute;}
.bul-dot:before {display:inline-block; padding-right:0;}

.bul-dot {position:relative; padding-left:8px;}
.bul-dot:before {top:8px; left:0px; margin-top:-1px; width:3px; height:3px; border-radius:50%; background:#444;}

/* UI Group Email */
.ui-group-email {display:table; width:100%;}
.ui-group-email span {display:table-cell; text-align:center; vertical-align:middle;}
.ui-group-email span.dash {width:50px;}
.ui-group-email span:last-child {padding-left:10px;}
.ui-group-email input,
.ui-group-email select {width:100%;}
.ui-group-email select {min-width:215px;}

/* 필수 입력 */
.form-required {display:inline-block;}
.form-required:before {content:'*'; position:relative; top:2px; margin-right:3px; color:#e31937; font-size:16px;}
.form-required span {position:absolute; left:-999rem; top:-999rem;}

/* input-group-email */
.input-group-email .form-text {display:inline-block; padding:0 12px;}
.input-group-email input + select {margin-left:7px;}

/* input-group-tellNo */
.input-group-tellNo .form-text {display:inline-block; padding:0 7px;}

/* UI Group List */
.ui-group-list {position:relative;}
.ui-group-list:after {content:""; display:block; clear:both;}
.ui-group-list li {float:left;}

.ui-group-list.two-up li {width:50%; margin-bottom:15px;}
.ui-group-list.two-up li .ui-radio {font-size:26px;}

.ui-group-list.three-up li {width:33.333%; margin-bottom:15px;}
.ui-group-list.three-up li .ui-radio {font-size:16px;}

/* UL, OL Type */
.ul-guide {padding-left:15px;}
.ul-guide li {position:relative; font-size:14px; line-height:24px; color:#737373; word-break:keep-all;}
.ul-guide li:before {content:"*"; display:inline-block; position:absolute; top:3px; left:-15px; line-height:24px;}
.ul-guide li:first-child {margin-top:0px;}
.ul-guide li.red {color:#e31937;}

.ul-guide.ul-guide-type2 li {position:relative; font-size:16px; line-height:30px; color:#333;}
.ul-guide.ul-guide-type2 li.red {color:#e31937;}
.ul-guide.ul-guide-type2 li:before {display:none;}

/* title */
.tit-con {margin-bottom:15px; font-family:"NanumSquareOTFB"; font-size:18px; color:#333; letter-spacing:-1px;}


/* table - tbl-form */
.tbl-form {border-top:1px solid #ededed; border-bottom:1px solid #ededed;}
.tbl-form th,
.tbl-form td {padding:20px; border-top:1px solid #ededed;}
.tbl-form tr:first-child th,
.tbl-form tr:first-child td {border-top:none;}
.tbl-form th {text-align:left;}
.tbl-form th.top {padding-top:30px; vertical-align:top;}

.tbl-form .form-text.type2 {padding:0 10px;}
.tbl-form .explain {font-size:14px; color:#666;}