@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],
input[type=tel],
select {
	height:90px;
	padding:10px 15px;
	border:2px solid #dedede;
	font-family:"NotoSans-Light";
	font-size:28px;
	color:#333;
	background-color:#ffffff;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
}

/* 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 56px 10px 15px; background:url('../../images/common/ico_select_arrow_off.png') right center no-repeat;}
select::-ms-expand {display:none;}

textarea {padding:20px 15px; font-family:"NotoSans-Light"; font-size:28px; border:1px solid #dedede; resize:none;}

/* 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;
	font-family:"NotoSans-Light";
	font-size:30px;
	line-height:40px;
	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:40px;
	height:40px;
	vertical-align:middle;
	background:url('../../images/common/ui_checkbox.png') left top no-repeat;
}
.ui-checkbox 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;}

/* UI Radio */
.ui-radio {
	display:inline-block;
	position:relative;
	font-family:"NotoSans-Light";
	font-size:26px;
	line-height:40px;
	color:#666;
	letter-spacing:-1px;
	vertical-align:middle;
}
.ui-radio input {display:none;}
.ui-radio input+span {
	display:inline-block;
	position:relative;
	top:-2px;
	width:40px;
	height:40px;
	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: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:80px; padding:0 25px; border:1px solid transparent; border-radius:3px; background-color:#eee; font-size:28px; line-height:80px; 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: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; 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 {float:left; width:calc(50% - 3px);}
.btn-wrap.two-up .btn:last-child {float:none;}

.btn-sm {height:50px; padding:0 20px; font-family:"NotoSans-Regular"; font-size:26px; line-height:46px; border-radius:4px;}
.btn-md {height:90px; padding:0 35px; font-family:"NotoSans-Regular"; font-size:28px; line-height:86px; border-radius:4px;}
.btn-lg {height:100px; padding:0 35px; font-family:"NotoSans-Medium"; font-size:32px; line-height:96px; border-radius:4px;}
.btn-md2 {height:90px; padding:0 80px; font-family:"NotoSans-Regular"; font-size:28px; line-height:86px; border-radius:4px;}

.btn-black	   {color:#ffffff; border:2px solid #333333; background-color:#333333;}
.btn-gray	   {color:#666666; border:2px solid #c6c6c6; background-color:#eeeeee;}
.btn-gray2	   {color:#666;}
.btn-red   	   {color:#ffffff; border:2px solid #e31937; background-color:#e31937;}
.btn-red2 	   {color:#cf152d;}
.btn-brown     {color:#ffffff; border:2px solid #625a5a; background-color:#625a5a;}
.btn-grayLine  {color:#111111; border:2px solid #afafaf; background-color:#ffffff;}
.btn-grayLine2  {color:#111111; border:2px solid #eee; background-color:#f7f7f7; border-radius:0;}
.btn-redLine   {color:#e31937; border:2px solid #e31937; background-color:#ffffff;}
.btn-brownLine {color:#625a5a; border:2px solid #625a5a; background-color:#ffffff;}
.btn-blackLine {border:2px solid #111;}

.btn-redChk:before {display:inline-block; margin-right:5px; width:18px; height:20px; background:url(../../images/common/ico_red_chk.png) no-repeat; content:'';}
.btn-arr span {display:inline-block; padding-right:28px; background:url(../../images/common/ico_btn_arr.png) no-repeat 100% 50%;}
.btn-etc {height:50px; width:280px; padding:0; font-family:"NanumSquareOTFR"; font-size:26px; line-height:46px; border-radius:3px;}
.btn-pop {height:105px; font-size:40px;}
.btn-pop + .btn-pop {border-left:3px solid #ccc;}
/* Icon */
.ico {display:inline-block; vertical-align:middle; text-indent:-9999em;}

.ico-branch {display:inline-block; width:154px; height:40px; border-radius:20px; color:#fff !important; font-size:24px !important; font-family:'NotoSans-Light'; text-align:center; line-height:40px;}
.ico-branch.red {background:#e31937; color:#fff !important;}
.ico-branch.orange {background:#e34419;}
.ico-branch.yellow {background:#ffa800;}


/* 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-type1 .tab li .ico-memEdit {padding-left:42px; background:url('../../images/mypage/ico_member.png') left center no-repeat;}
.tab-type1 .tab li .ico-shipping {padding-left:46px; background:url('../../images/mypage/ico_shipping.png') left center no-repeat;}
.tab-type1 .tab li .ico-prodInquiry {padding-left:43px; background:url('../../images/mypage/ico_product.png') left center no-repeat;}
.tab-type1 .tab li .ico-inquiry {padding-left:65px; background:url('../../images/mypage/ico_inquiry.png') left center no-repeat;}
.tab-type1 .tab li .ico-coupon {padding-left:60px; background:url(../../images/mypage/ico_coupon.png) 0 50% no-repeat;}
.tab-type1 .tab li .ico-point {padding-left:55px; background:url(../../images/mypage/ico_point.png) 0 50% no-repeat;}*/

/*.tab-type2 {border-bottom:2px solid #ffd400; text-align:center;}
.tab-type2 .tab li {display:inline-block; float:none;}
.tab-type2 .tab li a {display:block; height:86px; line-height:86px; padding:0 70px; color:#666; font-size:32px;}
.tab-type2 .tab li.on a {color:#111;}*/

/*.tab-type3 {padding:12px 10px 0; margin-bottom:40px; border-bottom:2px solid #dcdcdc; background:#e5e5e5; text-align:center;}
.tab-type3 .tab {margin-right:-4px;}
.tab-type3 .tab:after {display:block; clear:both; content:'';}
.tab-type3 .tab li {float:left; width:33.333333%; margin-left:-2px; margin-bottom:-3px; border:2px solid #dcdcdc; background:#f2f2f2;}
.tab-type3 .tab li:first-child {margin-left:0;}
.tab-type3 .tab li a {display:block; height:76px; color:#666; font-size:28px; line-height:76px;}
.tab-type3 .tab li.on {border-bottom-color:#fff; background:#fff;}
.tab-type3 .tab li.on a {color:#111;}

.tab-type4 {margin-bottom:40px; border-bottom:2px solid #dcdcdc; background:#e5e5e5; text-align:center;}
.tab-type4 .tab {margin-right:-4px;}
.tab-type4 .tab:after {display:block; clear:both; content:'';}
.tab-type4 .tab li {float:left; width:25%; margin-left:-1px; margin-bottom:-3px; border:1px solid #d1d1d1; border-bottom-color:#111; background:#fff;}
.tab-type4 .tab li ~ li {margin-left:0; border-bottom-color:#111;}
.tab-type4 .tab li:first-child {margin-left:-1px;}
.tab-type4 .tab li:last-child {border-right-color:#fff;}
.tab-type4 .tab li a {display:block; height:76px; color:#666; font-size:28px; line-height:76px;}
.tab-type4 .tab li.on {border-color:#111; border-bottom-color:#fff; background:#fff;}
.tab-type4 .tab li.on:first-child {margin-left:-1px; margin-right:1px;}
.tab-type4 .tab li.on a {color:#111;}

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

/* 메뉴 제목 */
.tit-wrap .m-tit{height:98px; border-bottom:2px solid #ffd400; font-size:40px; text-align:center; line-height:96px;}

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

/* 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:40px; font-size:28px; color:#333; }
.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;}

/* UI Group tel */
.ui-group-tel {display:table; width:100%;}
.ui-group-tel span {display:table-cell; text-align:center; vertical-align:middle;}
.ui-group-tel span.dash {width:27px; font-size:28px; color:#333;}
.ui-group-tel input,
.ui-group-tel select {width:100%;}
.ui-group-tel select {min-width:205px;}

/* 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:50px;}
.ui-group-list.two-up li .ui-radio {font-size:26px;}

/* form-list */
.form-list {margin-top:30px; padding:50px 0; border-top:0px solid #ededed; border-bottom:0px solid #ededed;}
.form-list dt {margin-bottom: 20px;}
/*.form-list dd {margin-bottom:70px;}*/
.form-list dt + dd {margin-bottom:70px;}
.form-list dd + dd {margin-top:-50px; margin-bottom:70px;}
.form-list dd:last-of-type {margin-bottom:0;}
.form-list dt .form-label {font-size:28px; color:#333; }

/* select-wrap two-up */
.select-wrap.two-up {display:block;}
.select-wrap.two-up:after {display:block; clear:both; content:"";}
.select-wrap.two-up select {width:calc(50% - 10px);}
.select-wrap.two-up select + select {margin-left:10px;}

/* input위에 글씨 겹칠 때 */
.input-uptxt {position:relative;}
.input-uptxt .txt {position:absolute; display:inline-block; height:90px; top:0; right:26px; font-size:28px; color:#333; line-height:90px;}
.input-uptxt:after {content:''; display:block; clear:both;}
.input-uptxt .one-up {display:inline-block; position:relative; width:calc(50% - 10px);}
.input-uptxt .one-up input {width:100%;}
.input-uptxt .one-up + .one-up {margin-left:10px;}
.input-addr input {width:calc(100% - 280px);}

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

.ul-guide-type2 li {font-size:26px;}

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