@charset "utf-8";
/* ========================================
Website : K-pars(O2O)
File Name : product_all.css
Version : CSS2.1 (+ 3.0)
Maker :a moo (minuya@gmail.com)
Date : 2021 / MAY
Explanation : Contents(RWD) - Reset css + Common Definition + Login/SignUp : (Integration Customizing)
Modify Date : 2021 / 07 / 29
======================================== */

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* ----- ----- ----- -----
 	All Device(Default)
----- ----- ----- ----- */

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;font-size:100%;border:0}
section, article, address, blockquote, center, div, figure, figcaption, footer, form, header, hr, legend, listing, p, plaintext, pre, summary, xmp {display:block}
dl, ul, ol, menu, li{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none}
em, i, optgroup, address, caption, legend, cite, code, dfn, var{font-style:normal}
dt, dd, li, p{word-break:keep-all}
table{border-collapse:collapse;border-spacing:0}
button, img, fieldset, iframe{border:0}
hr{display:none}

/* Common */
html, body{height:100%;color:#555}
body, input, textarea, select, button, table, samp{font:400 14px/1.3 'Noto Sans KR', 'Arial', sans-serif;background:#fff;box-sizing:border-box;-webkit-text-size-adjust:100%}
h1, h2, h3, h4, h5, h6{font-weight:500;font-family:'Noto Sans KR', 'Arial', sans-serif}
button{background:inherit;-webkit-appearance:none}
img, input, select, button, textarea{vertical-align:middle}
img{max-width:100%;box-sizing:border-box}
a{color:#555;text-decoration:none}
a:active, a:hover{text-decoration:none}
a:focus{outline:#90b5cf auto 1px;outline-offset:-2px}
label, button{cursor:pointer}
input[type=text], input[type=password], input[type=tel], input[type=submit], input[type=search], textarea, select{display:inline-block;min-height:33px;padding:5px 10px;color:#555;border:1px solid #d2d6de}
input[type=text]:disabled{background-color:#eee}
input[readonly=readonly]{background-color:#eee}
input::-ms-input-placeholder, input::-webkit-input-placeholder, input::-moz-placeholder{color:#777}
select:disabled{background-color:#eee}
textarea{-webkit-appearance:none;resize:none}
caption, legend{width:0;height:0;margin:0;padding:0;font-size:1px;color:#fff;text-indent:-99999px;line-height:0;overflow:hidden}

/* Hidden Contents */
.offscreen{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0)}

/* Skip Navigation */
#skip_navi{position:absolute;top:0;height:0px;width:100%;z-index:150}
#skip_navi a{width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);overflow:hidden;color:#fff;font-size:0;text-align:center}
#skip_navi a:focus, #skip_navi a:active{display:block;width:100%;height:50px;line-height:50px;font-size:inherit;background:#021b87}

.clearfix:after{content:'';display:block;width:100%;height:0;overflow:hidden;clear:both}
.shadow-box{position:relative;padding:15px 30px 10px;background:#fff;border:1px solid #e7e7e7;border-radius:3px;box-sizing:border-box;box-shadow:1px 0 12.61px .39px rgba(9, 9, 9, .14)}
.desc{color:#777;font-size:13px;line-height:20px;margin-bottom:12px;overflow:hidden}
.noti{color:#c70f0f;font-weight:400;font-size:12px}
p.noti{line-height:35px;text-align:right}
.fl{float:left}
.fr{float:right}
.txt-right{text-align:right}
.txt-left{text-align:left}
.txt-center{text-align:center}
.national .flag-icon{margin-right:4px;border:1px solid #eee}

.frm{display:inline-block;position:relative;margin-right:8px;padding-left:25px}
.frm > input[type=radio], .frm > input[type=checkbox]{position:absolute;top:0;left:0;margin:8px 4px}
.frm > label{line-height:30px}

/*===== Button(통합) =====*/
/* My page(Default) */
.btn_re_gray{background:linear-gradient(to bottom,#f7f8fa,#e8e9ea);font-size:13px;padding:7px 15px;border:1px solid #ccc;border-radius:3px}
.btn_re_gray:hover{background-color:#c4c3c3}
.btn_re_gray.withdrawl{position:absolute;top:50%;right:0}
.btn_re_gray01{display:inline !important;background: linear-gradient(to bottom,#f7f8fa,#e8e9ea);background-color: transparent;border:0;font-size:13px;margin:0;padding:2px 15px;border-radius:3px;text-align: center;
border: 1px solid #ddd;white-space:nowrap;height:23px;line-height:inherit !important}
.btn_re_gray01:hover{background:linear-gradient(to bottom,#e7e8e9,#d6d7d8)}
/* list(back) */
.btn-list{display:inline-block;height:41px;padding:0 3em;color:#fff;font-size:16px;line-height:41px;text-align:center;background:#818181;border-radius:4px}
.btn-ico-back{display:inline-block;width:30px;height:30px;padding:.6em;border-radius: 15px;background:#888 url(/images/gtrade/icon_back.png) no-repeat 50% 50%/50%}

.sbtn{min-width:64px;padding:.3em 1.2em .5em;color:#fff;font-size:.85em;border-radius:4px}
.sblue{background:#337ab7}
.sblue:hover, .sblue:focus{background:#4692d3}
.sgray{background:#777}
.sgray:hover, .sgray:focus{background:#999}
.skyblue01{background:#4692d3}
.skyblue01:hover{background:#3086b8}
.btn_sgraybg{display:inline-block;padding:.6em;border-radius:15px;background-color:#eee;width:30px;height:30px;vertical-align:top}
.sbtn01{display:inline;margin:0 2px;padding:.1em .7em .2em;font-size:85%;font-weight:600;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline}
.sbtn.sblue{background:#1469aa}

/* frm-btn */
.btn-frm-area{position:relative;clear:both;display:block;margin:40px auto 30px;text-align:center}
.btn-frm-box{display:inline-block; min-width:40%; height:41px;line-height:39px;color:#fff;font-size:16px;background:#075eb7;border:1px solid #ddd;border-radius:4px}
.btn-frm-box:hover, .btn-frm-box:focus{color:#075eb7;background:#fff;border-color:#075eb7}
.btn_list{display:inline-block;  min-width:40%; height:41px; line-height:39px; font-size:16px; color:#075eb7; background:#fff; border: 1px solid #075eb7; border-radius:4px}
.btn_list:hover, .btn-list:focus{ color:#fff; background:#075eb7; border:1px solid #ddd;}


/*width */
.w8{width:8% !important}
.w10{width:10% !important}
.w15{width:15% !important}
.w20{width:20% !important}
.w25{width:25% !important}
.w29{width:29% !important}
.w298{width:29.5% !important}
.w30{width:30% !important}
.w35{width:35% !important}
.w40{width:40% !important}
.w50{width:50% !important}
.w60{width:60% !important}
.w65{width:65% !important}
.w70{width:70% !important}
.w80{width:80% !important}
.w100{width:100% !important}


/* ============ */
/*  로그인/회원가입   */
/* ============ */

/* === All Device(Default) === */

/* frm(commom) */
.sign_area{max-width:940px;padding-bottom:60px}
.sign_area .sub-tit{display:inline-block;margin-bottom:4px;color:#333;font-weight:400;font-size:21px}
.sign_area .desc{color:#777;font-size:13px;margin-bottom:15px}
.sign_area .frm-box{position:relative}
.sign_area .frm-box:after{content:'';clear:both;display:block}
.sign_area .frm-box .frm{display:inherit;margin-right:0;padding-left:0}
.sign_area .frm-box .frm + .frm{margin-top:8px}
.frm-box input[type=text], .frm-box input[type=tel], .frm-box input[type=password], .frm-box select{width:100%;height:52px;border:1px solid #999;padding:0 20px}
/* Login */
.frm-box.login-frm{margin-top:60px;padding-right:143px}
.login-frm .id-save{padding:10px 0}
.login-frm .btn-login{position:absolute;top:0;right:0;width:135px;height:112px;font-weight:500;font-size:18px;background:#eee;border:1px solid #777}
.regist-btn{margin:10px 0;text-align:center}
.regist-btn li{display:inline-block;padding:.4em 0}
.regist-btn li:nth-child(n+2):before{content:'';display:inline-block;width:1px;height:10px;margin:0 .6em;background:#ddd}
.regist-btn a{display:inline-block;padding:0 2px}
/* Fined */
.email-group input[type=text], .email-group select{display:inline-block;width:30%}
.email-group input[type=text]:first-of-type{width:calc(100% - 60% - 40px)}
.email-group input[type=text] + select{margin-left:5px}
.email-group .at{display:inline-block;width:25px;padding-top:12px;text-align:center}
/* Fined-result */
.find-result{padding:10px 0;font-size:1.1em}
.find-result em{color:#000;font-weight:500;font-size:1.5em}

/* Sign Up(Seller) */
.step{margin-bottom:25px}
.step:after, .step:after{content:'';display:block;clear:both}
.step li{display:inline-block;color:#777;font-size:12px}
.step li.active{color:#000;font-weight:500}
.step li + li:before{content:'>';overflow:hidden;display:inline-block;width:13px;height:13px;margin-right:4px;vertical-align:top}

.ptitle-wrap{margin-bottom:28px}
.ptitle-wrap:after{content:'';display:block;clear:both}
.ptitle-wrap .ptitle{display:inline;vertical-align:top}
.ptitle{margin-bottom:30px;color:#000;font-size:32px;font-weight:600;letter-spacing:-.05em}
.ctitle{margin-top:40px;margin-bottom:15px;color:#000;font-size:21px;letter-spacing:-.05em}
.stepContainer > h2.ctitle{margin-top:20px}

.agree-wrap{border-top:2px solid #000;border-bottom:1px solid #aaa}
.agree-wrap .arow{padding:40px 20px 30px}
.agree-wrap .arow + .arow{padding-top:0}
.agree-wrap .arow .box{padding:20px 30px;border:1px solid #eee}
.agree-wrap .arow .busin_num{margin:0 auto}
.agree-title{color:#333;font-size:18px;line-height:1.5}
.agree-title > mark{padding:0 0 5px;font-weight:500}
.agree-chk-wrap .atitle{padding-bottom:10px;color:#000;font-weight:600;font-size:18px}
.agree-chk-wrap .business{display:inline-block}
.agree-wrap .agree-desc{overflow-y:auto;height:200px;padding:20px;color:#777;line-height:1.5;letter-spacing:-.02em;border:1px solid #ddd}
.agree-wrap .agree-text{padding:20px 0 0;font-weight:600;font-size:18px;letter-spacing:-.05em}
.agree-chk-wrap.busin_num .frm-box[role=group] .frm + .frm::before{content:'';display:inline-block;width:10px;height:1px;margin:0 4px 0 2px;vertical-align:middle;background:#999}
.onlyNum{text-align:center}

.join_prov_wrap{margin:20px 0;border-top:3px solid #0050a3;background:#f6f6f6;padding:50px 25px}
.join_complete{padding-left:40%;background:url(/images/gtrade/agree_img.png) no-repeat 0 0/40%}
.join_com_box{padding:5% 0 5% 10%}
.join_com_box .ctitle{margin-top:0;font-weight:600;font-size:27px}
.join_com_box .ctitle > em{padding-right:5px;color:#df3128}
.join_com_box p{line-height:1.5}

.join-tbl-write{width:100%;table-layout:fixed;border-top:2px solid #383a4a}
.join-tbl-write thead th{height:27px;padding:8px 4px;text-align:center;background:#f7fafc;border:1px solid #dedede;border-width:0 0 1px 1px}
.join-tbl-write thead th:first-child{border-left:0}
.join-tbl-write thead th.line{border-left:1px solid #ddd}
.join-tbl-write tbody th,.join-tbl-write tbody td{border-bottom:1px solid #dedede;border-right:1px solid #dedede}
.join-tbl-write tbody td:last-child{border-right:none}
.join-tbl-write tbody th{height:22px;padding:10px 4px;color:#333;font-weight:400;text-align:left;letter-spacing:-.04em;background:#f8f8f8;vertical-align:top;word-break:break-all}
.join-tbl-write tbody td{padding:5px;text-align:left}
.join-tbl-write tbody td.contents{padding:15px 0;border-top:1px solid #ddd}
.join-tbl-write tbody td input[type="file"]{margin:1px 0;padding:0;width:100%;font-size:12px;background:#f0f0f0;-webkit-appearance:none;border:0}
.join-tbl-write tbody td .fileBox{position:relative;padding-right:235px}
.join-tbl-write tbody td .fileBox .btn{position:absolute;top:0;right:0}
.join-tbl-write tbody td .fileBox .btn button{font-weight:bold}
.join-tbl-write input[type=text], .join-tbl-write input[type=password], .join-tbl-write select{width:60%}
.join-tbl-write select{height:30px}
.join-tbl-write select + select{margin-top:5px}
.join-tbl-write [role=group] p + p{margin-top:5px}
.join-tbl-write label > input[type=radio]{display:inline-block;margin:8px 4px;vertical-align:middle}
.join-tbl-write [role=group] .zip-num{width:20%}
.join-tbl-write [role=group] .zip-txt{width:100%}
.join-tbl-write [role=group][aria-labelledby=USER_NAME-group] > p label{display:block;margin-bottom:5px}
.join-tbl-write .unit-group > .unit{margin-left:5px}
.join-tbl-write + .agree-wrap{padding-bottom:30px}

/* === Mobile Device === */

@media all and (max-width:639px) {
	/* Login */
	.frm-box.login-frm{padding:0}
	.frm-box.login-frm .btn-login{position:static;width:100%;height:auto;margin:10px 0;padding:.4em}
	/* Fined */
	.email-group input[type=text]{width:39.8%}
	.email-group input[type=text]:first-of-type{width:calc(50% - 3px)}
	.email-group input[type=text] + select{width:100%;margin:8px 0 0}
	/* Sign Up(Seller) */
	.step{display:none}
	.agree-wrap .arow{padding:20px 0}
	.agree-wrap .arow .box{padding:14px 10px 13px}
	.busin_num .frm-box[role=group]{display:block;margin-top:10px}
	.busin_num .frm-box[role=group] .frm{display:inline}
	.busin_num .frm-box[role=group] input[type=tel]{padding:0 10px;box-sizing:initial}
	.join_prov_wrap{text-align:center}
	.join_complete{padding:55% 0 0 0;background-position:50% 0;background-size:60%}
	.join_com_box{padding:0}
	.join_complete .btn-frm-area{margin-bottom:-20px}
	.join-tbl-write col:first-of-type{width:33% !important}
	.join-tbl-write input[type=text], .join-tbl-write input[type=password], .join-tbl-write select{width:100%}
	.join-tbl-write [role=group] .w30{width:46% !important}
	.join-tbl-write [role=group][aria-labelledby=zip-group] p > .btn_re_gray{width:100%;margin-bottom:4px}
	.join-tbl-write [role=group] .zip-num{width:100%}
	.join-tbl-write tbody td input[type=text] + .btn_re_gray{display:block;width:100%;margin-top:5px}
	.unit-group > .unit{display:none}
}