@charset "utf-8";

@import url("common.css");
@import url("xeicon.css");
@font-face { 
	font-family: 'NanumSquareRound'; 
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff'); font-weight: normal; font-style: normal; 
}

@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:300;
    src:url(fonts/NotoSansCJKkr-DemiLight.eot);
    src: local(☺),
    url(fonts/NotoSansCJKkr-DemiLight.eot?#iefix) format('embedded-opentype'),
    url(fonts/NotoSansCJKkr-DemiLight.woff) format('woff');
}
@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:400;
    src:url(fonts/NotoSansCJKkr-Regular.eot);
    src: local(☺),
    url(fonts/NotoSansCJKkr-Regular.eot?#iefix) format('embedded-opentype'),
    url(fonts/NotoSansCJKkr-Regular.woff) format('woff');
}
@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:500;
    src:url(fonts/NotoSansCJKkr-Medium.eot);
    src: local(☺),
    url(fonts/NotoSansCJKkr-Medium.eot?#iefix) format('embedded-opentype'),
    url(fonts/NotoSansCJKkr-Medium.woff) format('woff');
} 
@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:600;
    src:url(fonts/NotoSansCJKkr-Bold.eot);
    src: local(☺),
    url(fonts/NotoSansCJKkr-Bold.eot?#iefix) format('embedded-opentype'),
    url(fonts/NotoSansCJKkr-Bold.woff) format('woff');
} 


* {margin:0; padding:0; box-sizing:border-box; -webkit-text-size-adjust:none;}
body,html {width:100%; min-width:320px; min-height:100vh; font-family:'NotoSans',sans-serif; color:#111; font-size:17px; font-weight:400; letter-spacing:-.6px; line-height:1.5;}
body {position:relative;}
body.uiWeb {font-size:16px;}
body.uiTab, body.uiTab2 {font-size:15px;}
body.uiMob {font-size:14px;}
a {font-family:inherit; text-decoration:none; color:inherit; outline:none;}
em, i, address {font-style:normal;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
ul, ol {list-style:none;}
ul, ol:after {content:''; display:block; clear:both;}
b, strong {font-weight:600;}
img {border:0; vertical-align:top;}
table {width:100%; table-layout:fixed; border-collapse:collapse; border-spacing:0;}
input, textarea, select, button {font-family:inherit; font-size:inherit; color:inherit; appearance:none; -webkit-appearance:none; outline:none;}
iframe {width:100%; border:none;}
button {border:0; box-shadow:none; cursor:pointer; background:transparent;}
input[type="text"]:disabled {background:#f5f5f5; opacity:1;}
input[type="text"],input[type="password"],input[type="number"],input[type="tel"],input[type="email"],
input[type="button"],input[type="submit"],input[type="reset"] {width:100%; height:50px; padding:0 15px; border:solid 1px #eaeaea; border-radius:6px;}
textarea {width:100%; height:200px; line-height:1.5em; padding:12px; border:solid 1px #eaeaea; resize:none; border-radius:6px;}
select {width:100%; height:50px; padding:0 25px 0 15px; border:1px solid #eaeaea; background:#fff url('../images/input_select.png') right 50% no-repeat; background-size:22px; border-radius:6px;} 
select::-ms-expand {display:none; background-color:transparent; border:0;}

::-webkit-input-placeholder {color:#c1c1c1; font-weight:300;}
::-moz-placeholder {color:#c1c1c1; font-weight:300;}
:-ms-input-placeholder {color:#c1c1c1; font-weight:300;}

/* --------------------------------------------------------------------------------------------------------
	Fast Class
----------------------------------------------------------------------------------------------------------- */
.ac {text-align:center !important;}
.ar {text-align:right !important;}
.al {text-align:left !important;}
.aj {text-align:justify !important;} 
.at {vertical-align:top !important;}
.am {vertical-align:middle !important;}

.fl {float:left !important;}
.fr {float:right !important;}

.w50 {width:50% !important;}
.w100 {width:100% !important;}
.mw100 {max-width:100% !important;}

.mt0 {margin-top:0 !important;}
.mt10 {margin-top:10px !important;}
.ml10 {margin-left:10px !important;}
.mr30 {margin-right:30px !important;}
.mb20 {margin-bottom:20px !important;}
.pt10 {padding-top:10px !important;}
.pt30 {padding-top:30px !important;}

.blind {position:absolute; width:1px; height:1px; margin:-1px; border:0; overflow:hidden; clip:rect(0,0,0,0);}

.toe {display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.eps {display:block; text-overflow:ellipsis; height:2.8em; line-height:1.4em; word-wrap:break-word; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

.f-red {color:#ff1b2f !important;}
.f-vol {color:#6236ff !important;}
.f-gry {color:#999 !important;}
.f-bk {color:#111 !important;}
.fw-b {font-weight:500;}
.fw-n {font-weight:400;}
.fw-t {font-weight:300;}

.pc {display:block;}
.mb {display:none;}


/* --------------------------------------------------------------------------------------------------------
	Input(checkbox/radio)
----------------------------------------------------------------------------------------------------------- */
input[type="checkbox"], input[type="radio"] {display:none;}
input[type="radio"] + label, input[type="checkbox"] + label {position:relative;	margin-right:15px; cursor:pointer;} 
input[type="checkbox"] + label:before, input[type="radio"] + label:before {content:''; display:inline-block; width:24px; height:24px; margin:-3px 10px 0 0; text-align:center; line-height:24px; background:#e0e0e0; border-radius:50%; vertical-align:middle; cursor:pointer;}
input[type="checkbox"] + label:before {content:'\e929'; font-family:'xeicon'; font-size:22px; color:#fff; line-height:24px; font-weight:500;}
input[type="checkbox"]:checked + label:before {background:#ff1b2f;}
input[type="radio"] + label:before {background:#fff; border:8px solid #e0e0e0; box-sizing:border-box;}
input[type="radio"]:checked + label:before {background:#fff; border:8px solid #ff1b2f; box-sizing:border-box;}

/* --------------------------------------------------------------------------------------------------------
	Button
----------------------------------------------------------------------------------------------------------- */
.btn-wrap {margin:50px 0; text-align:center;}
button[class^="btn-"] {display:inline-block; text-align:center;}
.btn-red {width:245px; height:58px; background:#ff1b2f; color:#fff; font-size:19px; font-weight:500; letter-spacing:-.6px; border-radius:35px;}
.btn-red.lg {width:316px;}
.btn-red.lg > span {font-size:16px;}
.btn-gry {width:245px; height:58px; background:#8d949c; color:#fff; font-size:19px; font-weight:500; letter-spacing:-.6px; border-radius:35px;}
.btn-dgry {width:245px; height:58px; background:#3d4248; color:#fff; font-size:19px; font-weight:500; letter-spacing:-.6px; border-radius:35px;}
.btn-bk {width:135px; height:50px; background:#fff; border:1px solid #111; color:#111; font-size:16px; font-weight:500; letter-spacing:-.6px; border-radius:10px;}
.btn-blue {width:245px; height:58px; background:#6236ff; color:#fff; font-size:19px; font-weight:500; letter-spacing:-.6px; border-radius:35px;}

/* --------------------------------------------------------------------------------------------------------
	Table
----------------------------------------------------------------------------------------------------------- */
.tbl-data {border:1px solid #cfd2d4;}
.tbl-data th {background:#f6f6f6; font-weight:500;}
.tbl-data th, .tbl-data td {padding:18px 0; border-bottom:1px solid #e7e8e9;}
.tbl-data td {padding:18px 25px; border-left:1px solid #e7e8e9;}
.tbl-data tr:last-child th, .tbl-data tr:last-child td {border-bottom:0;}
.tbl-data td > p {color:#666; font-size:16px;}
.tbl-data td > strong {font-weight:500;}

/* --------------------------------------------------------------------------------------------------------
	Responsive
----------------------------------------------------------------------------------------------------------- */
@media all and ( max-width:1080px ) {
	input[type="text"],input[type="password"],input[type="number"],input[type="tel"],input[type="email"],
	input[type="button"],input[type="submit"],input[type="reset"] {padding:0 10px;}
	textarea {padding:10px;}

	input[type="checkbox"] + label:before, input[type="radio"] + label:before {width:22px; height:22px; line-height:22px;}
	input[type="checkbox"] + label:before {line-height:22px; font-size:20px;}
	input[type="radio"] + label:before {border:7px solid #e0e0e0;}
	input[type="radio"]:checked + label:before {border:7px solid #ff1b2f;}

	.btn-wrap {margin:35px 0;}
	.btn-wrap.col-2 > button {width:calc(50% - 5px);}
	
	.tbl-data th {padding:14px 0; font-size:15px;}
	.tbl-data td {padding:14px 12px;}
	.tbl-data td > p {font-size:14px; line-height:1.3;}
	.tbl-data td > strong {font-size:15px;}
}

@media all and ( max-width:800px ) {
	.btn-red, .btn-red.lg, .btn-gry, .btn-dgry, .btn-blue {height:55px; font-size:17px;}
	.btn-bk {font-size:15px;}
	.btn-red.lg > span {font-size:14px;}
}

@media all and ( max-width:600px ) {
	.mb {display:block;}
	.pc {display:none;}
	.btn-red, .btn-red.lg, .btn-gry, .btn-dgry {width:100%;}
	.btn-blue {width:190px;}
}