@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : UI_Style.CSS
	Company : The Webstyle co.,ltd
 	Author : Jong Hoon, Park 2015-12
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc
--------------------------------------------------------------------------------------------------------------------------------------------*/

/* background color */
.bg-gray {background-color:#f4f4f4;}


/*-------------------------------------------------------------------
	Form
-------------------------------------------------------------------*/
/* Default */
input:-ms-input-placeholder, textarea:-ms-input-placeholder {font-family:"NotoSansKR"; color:#aaa;}/* IE 10 + */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {font-family:"NotoSansKR"; color:#aaa;}/* Webkit Browser */
input:-moz-placeholder, textarea:-moz-placeholder {font-family:"NotoSansKR"; color:#aaa;}/* Mozilla Firefox 4 to 18 */
input::-moz-placeholder, textarea::-moz-placeholder {font-family:"NotoSansKR"; color:#aaa;}/* Mozilla Firefox 19+ */
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {color:transparent;}/* IE 10 + */
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {color:transparent;}/* Webkit Browser */
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {color:transparent;}/* Mozilla Firefox 4 to 18 */
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {color:transparent;}/* Mozilla Firefox 19+ */
input {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:0px; vertical-align:middle; font-size:14px;}
textarea {width:100%; vertical-align:middle; resize:none;}
select {appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none;}
select::-ms-expand {display:none;}
:root select {padding:0px 30px 0px 10px;}
/* a:visited {color:#333;} */

/* input */
.inp-row {display:block; position:relative;}
.inp-row + .inp-row {margin-top:10px;}
.inp-wrap {display: block; position:relative;}
.inp-wrap.required:before {display:block; position:absolute; height:40px; top:2px; left:10px; font-size:16px; color:#ff9600; content:"*"; line-height:40px; z-index:1;}
.inp-wrap.required:before + input:focus {display: none;}
.inp-row.col2 {display:flex; justify-content:space-between;}
.inp-row.col2 > .inp-wrap {width:calc(50% - 7px);}
.inp-row.col2 > .inp-wrap input {width:100%;}
.inp-wrap .select-default{width:100%; height:40px; padding:0 0 0 9px; border:transparent; border-radius:2px; font-family:"NotoSansKR"; font-size:14px; color:#999; line-height:33px; background:url('/Images/Common/btn_sel_arrow_on.png') #f3f3f3 right 10px center no-repeat; background-size:20px;}
.inp-wrap .select-default span {color:#fff; line-height:38px; opacity:0.5;}


.inp-condition {height:40px; padding:13px 26px; background-color:#262626; color:#fff;}
.inp-condition::placeholder {color:#fff; opacity:0.5;}


/*-------------------------------------------------------------------
    Button
-------------------------------------------------------------------*/
/* Default */
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;}
button span {position:relative; height:100%;}
.btn-wrap {position:relative; display:block; 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 {display:inline-block; position:relative; vertical-align:middle; cursor:pointer;  text-align:center; white-space:nowrap; opacity:1;}
.btn > span {display:inline-block; position:relative; height:100%; font-family:inherit;}

.btn-navy {background-color:#1d3d6d;}
.btn-navy span {color:#fff;}
.btn-linenavy {border:1px solid #1d3d6d; background-color:#fff;}
.btn-linenavy span {color:#1d3d6d;}
.btn-linegray {border:1px solid #ccc; background-color:#fff;}
.btn-linegray span {color:#333;}

.btn-mid {height:34px; padding:0 11px; border-radius:4px; line-height:32px;}
.btn-mid span {font-size:14px; font-weight:700;}
.btn-midRound {width:110px; height:38px; margin:0 10px; border-radius:22px; line-height:34px;}
.btn-midRound span {padding-top:2px; font-size:16px; font-weight:700;}

.btn-radius {border-radius:24px;}

.btn-refresh {width:144px; height:48px; border-radius:24px; line-height:48px; text-align:center;}
.btn-refresh span:before {display:inline-block; position:relative; top:2px; width:16px; height:16px; margin-right:8px; background:url('/microsite/images/common/ico_refresh.png') no-repeat; background-size:100%; content:"";}
.btn-more {width:230px; height:60px; line-height:60px; border-radius:28px; text-align:center;}
.btn-more span {font-size:18px;}
.btn-add span:before {display:inline-block; position:relative; top:3px; width:16px; height:16px; margin-right:8px; background:url('/microsite/images/common/ico_plus.png') no-repeat; background-size:100%; content:"";}
.btn-home span:before {display:inline-block; position:relative; top:3px; width:16px; height:16px; margin-right:8px; background:url('/microsite/images/common/ico_home.png') no-repeat; background-size:100%; content:"";}
.btn-home.btn-search span:before {display:inline-block; position:relative; top:3px; width:16px; height:16px; margin-right:8px; background:url('/microsite/images/common/ico_search.png') no-repeat; background-size:100%; content:"";}
.btn-estimate span:before {display:inline-block; position:relative; top:3px; width:16px; height:16px; margin-right:8px; background:url('/microsite/images/common/ico_estimate.png') no-repeat; background-size:100%; content:"";}



/* Check */
.form-check {display:inline-block; position:relative; margin:0; vertical-align:top;}
.form-check label {display:inline-block; position:relative;}
.form-check label > span {display:inline-block; position:relative; padding:0 0 0 31px; font-size:14px; line-height:20px; color:#666;}
.form-check label > span:before, .form-check label > span:after {content:''; position:absolute; left:0; top:0;}
.form-check label > span:before {top:0; width:20px; height:20px; border:1px solid #f4f4f4; background:transparent; opacity:0.5;}
.form-check label > input {position:absolute; left:0; top:0; width:20px; height:20px; opacity:0; z-index:1;}
.form-check label > input:checked + span:before {border-color:#f4f4f4;}
.form-check label > input:checked + span:after {left:3px; top:3px;}
.form-check label > input[type="checkbox"]:checked + span:before {background-color:#fff;}
.form-check label > input[type="checkbox"]:checked + span:after {width:10px; height:7px; background:none; border-left:2px solid #2dabe2; border-bottom:2px solid #f68c30; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.form-check label > input[type="radio"] + span:before {border-color:#ccc; border-radius:50%;}
.form-check label > input[type="radio"]:checked + span:after {top:4px; left:4px; width:12px; height:12px; border-radius:50%; background:#2dabe2;}
.form-check label > input[type="radio"].disabled-style + span:before {border-color:#ccc; background-color:#eee;}
.form-check label > input[type="radio"].disabled-style:checked + span:after {background-color:#ccc;}

.form-check02 {display:inline-block; position:relative; margin:0; vertical-align:top;}
.form-check02 label {display:inline-block; position:relative;}
.form-check02 label + label {margin-top:20px;}
.form-check02 label > span {display:inline-block; position:relative; padding:0 0 0 30px; font-size:16px; line-height:20px; color:#666;}
.form-check02 label > span.simple {padding:0; text-indent:-999em; text-align:left;}
.form-check02 label > span:before,
.form-check02 label > span:after {content:''; position:absolute; left:0; top:0;}
.form-check02 label > span:before {top:0; width:20px; height:20px; border:1px solid #ccc; background:#fff;}
.form-check02 label > input {position:absolute; left:0; top:0; width:20px; height:20px; opacity:0; z-index:1;}
.form-check02 label > input:checked + span:before {border-color:#1d3d6d;}
.form-check02 label > input:checked + span:after {left:3px; top:3px;}
.form-check02 label > input[type="checkbox"]:checked + span {color:#1d3d6d;}
.form-check02 label > input[type="checkbox"]:checked + span:before {background-color:#fff;}
.form-check02 label > input[type="checkbox"]:checked + span:after {width:14px; height:8px; background:none; border-left:2px solid #1d3d6d; border-bottom:2px solid #1d3d6d; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
 .form-check02 label > input[type="radio"] + span:before {border-color:#ccc; border-radius:50%;}
.form-check02 label > input[type="radio"]:checked + span:after {top:4px; left:4px; width:12px; height:12px; border-radius:50%; background:#1d3d6d;}
.form-check02 label > input[type="radio"].disabled-style + span:before {border-color:#ccc; background-color:#eee;}
.form-check02 label > input[type="radio"].disabled-style:checked + span:after {background-color:#ccc;}

/* ui select */
.select-list .btn-select {position:relative; width:100%; height:40px; padding:0 26px; border:1px solid transparent; background-color:#262626; text-align:left;}
.select-list .btn-select:after {display:block; position:absolute; width:11px; height:6px; top:50%; right:19px; margin-top:-3px; background:url(/microsite/images/common/ico_arr.png) no-repeat; background-size:100%; content:"";}
.select-list .btn-select span {color:#fff; line-height:38px; opacity:0.5; font-weight:600;}

.select-list dd {display:none; position:absolute; width:100%; z-index:5;}
.select-list dd .opt-list {display:block; position:relative; height:300px; overflow-y: auto;}
.select-list dd .opt-list .item {display:inline-block; width:100%; height:32px; padding:0 26px; border:1px solid #333; border-top:0; background-color:#262626; color:rgba(255, 255, 255, 0.5); line-height:31px; font-weight:600;}

.select-list.is-active .btn-select {border:1px solid #333;}
.select-list.is-active .btn-select:after {transform:rotate(180deg);}
.select-list.is-active dd {display:block;}


/* Modal Popup */
.pop-modal {display:none;}
.pop-modal-wrap {display:flex; justify-content:center; align-items:center; position:fixed; top:0px; left:0px; z-index:1000; width:100%; height:100%; padding:10px; background-color:rgba(0,0,0,0.6);}
.pop-wrapper {position:relative; flex:0 0 auto; width:770px; max-height:780px; padding:14px 50px 30px 50px; background-color:#fff;}
.pop-wrapper.pop-agree01 {{position:relative; flex:0 0 auto; width:770px; max-height:570px; padding:14px 50px 30px 50px; background-color:#fff;}}
.pop-wrapper.pop-big {width:100%; max-width:1280px; max-height:800px;}
.pop-modal-wrap.fullPop .pop-wrapper {width:100%; height:100%;}
.pop-wrapper .pop-container {position:relative; height:100%;}
.pop-wrapper .pop-content {position:relative; overflow-y:scroll; height:565px;}
.pop-wrapper.pop-agree01 .pop-content {position:relative; overflow-y:hidden; height:auto;}
.pop-wrapper.detail .pop-content {position:relative; overflow:hidden; height:565px;}
.pop-wrapper .pop-content::-webkit-scrollbar {width:8px;}
.pop-wrapper .pop-content::-webkit-scrollbar-thumb {border-radius:4px; background-color:#c4beba;}
.pop-wrapper .pop-content::-webkit-scrollbar-track-piece {border-radius:4px;background-color: #fff;box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);}

.pop-wrapper .btn-pop-close {position:absolute; top:40px; right:50px;overflow:hidden; width:20px; height:20px; text-indent:-9999px; background:url(/microsite/images/common/btn_close.png) no-repeat;}
.pop-wrapper .btn-confirmWrap {margin-top:20px;}
.btn-popConfirm {height:48px; width:145px; border:1px solid #ccc; border-radius:23px;}
.btn-popConfirm span {font-size:16px; color:#333; font-weight:700; line-height:46px;}

/* top버튼 pc-none(product_list)*/
.content-productList .bnt-top {display:none;}

@media all and (max-width:768px) {
	input {font-size:1.4rem;}
	.inp-condition {height:33px; padding:8px 29px;}
	.inp-wrap.required:before {height:33px; top:3px; font-size:1.3rem; line-height:33px;}

	.select-list .btn-select {height:33px;}
	.select-list .btn-select:after {width:8px; height:5px; right:15px; background-size:100%;}
	.select-list .btn-select span {line-height:31px;}

	.form-check label > input {width:16px; height:16px;}
	.form-check label > span:before {width:16px; height:16px;}
	.form-check label > span {padding:0 0 0 25px; line-height:16px;}
	.form-check label > input[type="radio"]:checked + span:after {width:10px; height:10px; top:3px; left:3px;}

	.pop-modal-wrap {padding:0px}
	.pop-wrapper {width:100%; padding:11px 15px 30px 15px;}
	.pop-wrapper .btn-pop-close {top:56px; right:20px; width:22px; height:22px; background:url(/microsite/images/common/btn_close_m.png) no-repeat; background-size:100%;}
	.btn-popConfirm {width:100%; height:50px;}
	.btn-popConfirm span {font-size:1.8rem; line-height:48px;}

	.pop-wrapper.pop-big {max-height:770px;}

	/* button */
	.btn-mid {height:40px; padding:0 11px; border-radius:4px; line-height:38px;}
	.btn-mid span {font-size:1.6rem;}

	.btn-more {width:100%; height:50px; line-height:50px;}

	.bnt-top {position: fixed; bottom:15px; right:15px; width:50px; height:50px; border:1px solid #1d3d6d; border-radius:50%; background-color:rgba(228, 228, 228, 0.5); }
	.bnt-top span {padding-top:23px; font-weight:700; font-size:1rem; color:#1d3d6d;}
	.bnt-top span:before  {display:block; position:absolute; top:12px; left:50%; width:18px; height:11px; margin-left:-9px; background:url('/microsite/images/common/ico_top.png') no-repeat; background-size:100%; content:"";}

    .content-productList .bnt-top {display:none; position: fixed; bottom:15px; right:15px; width:50px; height:50px; border:1px solid #1d3d6d; border-radius:50%; background-color:rgba(228, 228, 228, 0.5); }
	.content-productList .bnt-top span {padding-top:23px; font-weight:700; font-size:1rem; color:#1d3d6d;}
	.content-productList .bnt-top span:before  {display:block; position:absolute; top:12px; left:50%; width:18px; height:11px; margin-left:-9px; background:url('/microsite/images/common/ico_top.png') no-repeat; background-size:100%; content:"";}

	.btn-midRound span {font-size:1.6rem;}
}

/* modal on modal estimate-box */
.estimate-box {display:block; position:absolute; top:0; right:0; left:0; width:600px; margin:10px auto; padding:0px 20px 10px; border:1px solid #ddd; background: #fff; box-shadow:0px 0px 10px 0px #aaa; z-index:1;}
.estimate-box h3 {font-size:20px; font-weight:600; line-height:60px;}
.estimate-box .btn-pop-close {top:20px; right:20px;}
.estimate-box .inp-wrap {}
.estimate-box .agree-wrap {}
.estimate-box .inp-row + .agree-wrap {margin-top:20px;}
.estimate-box .inp-row + .agree-wrap {margin-top:20px;}
.estimate-box .agree-wrap + .agree-wrap {margin-top:20px;}
.estimate-box .agree-wrap .agree-txt {}
.estimate-box .agree-wrap .form-check {margin-top:10px;}
.estimate-box .form-check label > span {width:100px;}
.estimate-box .btn-wrap {margin-top:40px;}
.estimate-box .btn-wrap .btn-schMain {width:50%; height:40px; line-height:40px; background-color:#4b4b4b; border-radius:4px;}
.estimate-box .btn-wrap .btn-schMain span {font-weight:500; font-size:18px; color:#fff;}
.inp-condition2 {height:40px; padding:13px 26px; background-color:#4b4b4b; color:#fff;}
.inp-condition2::placeholder {color:#fff; opacity:0.51;}


@media all and (max-width:1280px) {
	.estimate-box {width:100%;}
}
@media all and (max-width:768px) {
	.estimate-box {position:fixed; width:100%; height:100%; margin:0; padding:20px; border:0;}
	.estimate-box .btn-pop-close {top:20px; right:20px; width:22px; height:22px;}
}