@charset "utf-8";
/* ===========================
	00. common
=========================== */
input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],

input[type=password]{
	display:inline-block; 

	max-width:100%; height:44px; 
	padding:0 14px; color:#222; 
	font-family:Noto Sans CJK KR, 'Noto Sans', dotum, gulim, verdana, sans-serif; 
	font-size:16px; border:1px solid #dedede; 
	background-color:#fff; outline:0; 
	box-sizing:border-box; 
	vertical-align:top;
	transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); 
	-webkit-transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}



textarea						{display:inline-block; width:100%; height:215px; padding:15px 14px; color:#222; font-family:Noto Sans CJK KR, 'Noto Sans', dotum, gulim, verdana, sans-serif; font-size:16px; line-height:20px; border:1px solid #dedede; overflow:auto; resize:none; vertical-align:top; box-sizing:border-box; outline:none; transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); -webkit-transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);}
select						{display:inline-block; width:95px; min-width:195px; max-width:100%; height:44px; padding:10px 40px 10px 14px; color:#222; font-family:Noto Sans CJK KR, 'Noto Sans', dotum, gulim, verdana, sans-serif; font-size:16px; line-height:1; border:1px solid #a1a1a1; background-color:#fff; background-position:right 20px center; background-repeat:no-repeat;box-sizing:border-box; text-indent:0.01px; outline:none; -webkit-appearance: none; -moz-appearance:none; appearance: none; vertical-align:top;}
select::-ms-expand		{display:none;}

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus,
input[type=text].active,
input[type=number].active,
input[type=email].active,
input[type=tel].active,
input[type=url].active,
input[type=password].active,
textarea.active {color:#222; border-color:#323232; background:#fff;}
input.bnone {border:0;}

::-webkit-input-placeholder	{color: #999;}
::-moz-placeholder				{color: #999;}
:-ms-input-placeholder			{color: #999;}
:-moz-placeholder				{color: #999;}

*::selection {color:#fff; background:#324554;}
*::-moz-selection {color:#fff; background:#324554;}

button,
input[type=file],
input[type=image],
input[type=reset],
input[type=button],
input[type=submit] {font-family:Noto Sans CJK KR, 'Noto Sans', dotum, gulim, verdana, sans-serif; border:none; border-radius:0; background:none; cursor:pointer; -webkit-appearance:none; appearance:none;}
button:focus,
button:hover {outline:none;}

/* jquery-ui */
.ui-datepicker .ui-datepicker-title select {display:inline-block; min-width:0; width:40%; height:30px; padding:5px 10px; margin:0 3px; color:#222; font-size:14px; line-height:1; border:1px solid #ddd; background-color:#fff;  background-position:right 10px center; background-repeat:no-repeat; vertical-align:middle; -webkit-appearance:inherit; appearance:inherit}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {top:4px;}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {top:3px;}

.datepicker-input {position:relative; display:inline-block;}
.datepicker-input > img {position:absolute; top:50%; right:20px; width:20px; height:22px; margin-top:-11px; cursor:pointer;}


/* ===========================
	01. checkbox
=========================== */
.chk-type01 {position:relative; display:inline-block; margin-right:17px; height:22px; line-height:22px;}
.chk-type01 input[type=checkbox] {position:absolute; top:0; left:0; width:0; height:0; opacity:0; filter:alpha(opacity=0);}
.chk-type01 input[type=checkbox] + label {display:inline-block; color:#666; font-size:14px; line-height:22px; cursor:pointer;}
.chk-type01 input[type=checkbox] + label span {display:inline-block; width:22px; height:22px; margin-right:10px; border:1px solid #a3a3a3; background-color:#fff; background-repeat:no-repeat; background-position:center -22px; box-sizing:border-box;}
.chk-type01 input[type=checkbox]:checked + label span {background-position:center center;}



/* ===========================
	02. radio 
=========================== */
.radio-type01 {position:relative; display:inline-block; margin-right:17px; height:22px; line-height:22px;}
.radio-type01 input[type=radio] {position:absolute; top:0; left:0; width:0; height:0; opacity:0; filter:alpha(opacity=0);}
.radio-type01 input[type=radio] + label {display:inline-block; color:#666; font-size:14px; line-height:22px; cursor:pointer;}
.radio-type01 input[type=radio] + label span {position:relative; display:inline-block; width:22px; height:22px; margin-right:10px; border:1px solid #a5a5a5; border-radius:11px; background-color:#fff; box-sizing:border-box; transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); -webkit-transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);}
.radio-type01 input[type=radio] + label span:after {content:''; position:absolute; top:50%; left:50%; display:block; width:0; height:0; margin-top:0; margin-left:0; border-radius:5px; background-color:#fff; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out;}
.radio-type01 input[type=radio]:checked + label span {border-color:#a5a5a5;}
.radio-type01 input[type=radio]:checked + label span:after {width:8px; height:8px; margin-top:-4px; margin-left:-4px; background-color:#cb0000;}


/* ===========================
	03. form 
=========================== */
/* 여러개 입력 */
.input-mulity > input {margin-left:5px;}
.input-mulity > input:first-child {margin-left:0;}

/* 라벨 있는 입력 */
.label-input {position:relative; display:inline-block;}
.label-input > label {margin-right:10px; color:#666; font-size:14px; line-height:44px;}

/* 라벨 있는 입력 여러개 있을경우*/
.label-input-mulity .label-input {margin-right:20px;}

/* 선택창 여러개 있을 경우 */
.select-mulity:after {content:''; display:block; clear:both;}
.select-mulity > p {float:left; display:block; margin-left:10px;}
.select-mulity > p:first-child {margin-left:0;}

/* 라벨 있는 선택창 */
.label-select {position:relative; display:inline-block;}
.label-select > label {margin-right:10px; color:#666; font-size:14px; line-height:44px;}

/* 라벨 있는 선택창이 여러개 있을 경우 */
.label-select-mulity .label-select {margin-right:20px;}

/* 아이디 */
.id-input > a,
.id-input > button,
.id-input > input[type=submit] {margin-left:7px;}

/* 연락처 */
.phone-wrap {overflow:hidden;}
.phone-wrap > div {position:relative; float:left; padding-left:19px;}
.phone-wrap > div:first-child {padding-left:0;}
.phone-wrap > div:first-child:after {display:none;}
.phone-wrap > div:after {content:''; position:absolute; top:50%; left:5px; display:block; width:9px; height:1px; background-color:#999;}
.phone-wrap select,
.phone-wrap input {width:144px; min-width:144px;}

/* 이메일 */
.email-input {overflow:hidden;}
.email-input > div {position:relative; float:left; padding-right:10px;}
.email-input > div:first-child {padding-right:25px;}
.email-input > div:first-child:after {content:'@'; position:absolute; top:0; right:0; display:block; width:25px; height:44px; color:#999; font-size:16px; line-height:44px; text-align:center;}
.email-input > a,
.email-input > button,
.email-input > input[type=submit] {float:left; margin:0;}
.email-input input[type=text] {width:235px; min-width:235px;}
.email-input select {width:auto; min-width:95px;}

/* 생년월일 */
.birthday-input {overflow:hidden;}
.birthday-input > div {float:left; margin-left:10px;}
.birthday-input > div:first-child {margin-left:0;}
.birthday-input .info {display:inline-block; margin-left:7px; color:#666; font-size:16px; line-height:44px;}

/* 주소입력 */
.address-input .zip-input > a,
.address-input .zip-input > button,
.address-input .zip-input > input[type=submit] {margin-left:7px;}
.address-input .txt-input {margin-top:15px; overflow:hidden;}
.address-input .txt-input > p {float:left; margin-left:10px;}
.address-input .txt-input > p:first-child {margin-left:0;}

/* 카드 번호 */
.card-num-input {overflow:hidden;}
.card-num-input > div {position:relative; float:left; padding-left:19px;}
.card-num-input > div:first-child {padding-left:0;}
.card-num-input > div:first-child:after {display:none;}
.card-num-input > div:after {content:''; position:absolute; top:50%; left:5px; display:block; width:9px; height:1px; background-color:#999;}
.card-num-input > a,
.card-num-input > button,
.card-num-input > input[type=submit] {float:left; margin-left:10px;}

/* 파일 업로드 */
.file-input {position:relative; padding-right:105px;}
.file-input .input-file {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:50; cursor:pointer;}
.file-input .read-file {width:100%; text-decoration:underline;}
.file-input > a,
.file-input > button,
.file-input > input[type=submit] {position:absolute; top:0; right:0; width:95px; height:42px; font-size:16px; line-height:42px; text-align:center;}
.file-input .btn-file.type-01 {color:#fff; border:1px solid #cb0000; background-color:#cb0000;}
.file-input .btn-file.type-02 {color:#fff; border:1px solid #8f8f8f; background-color:#8f8f8f;}
.file-input .btn-file.type-03 {color:#fff; border:1px solid #282828; background-color:#282828;}

.add-input {margin-top:10px;}
.add-input:first-child {margin-top:0;}

.add-file {position:relative; padding-right:98px; overflow:hidden;}
.add-file .file_info {margin-left:20px; padding:3px 0; overflow:hidden;}
.add-file .file_info > div {float:left;}
.add-file .file_info .data_info {color:#999; font-size:13px; line-height:26px;}
.add-file .btn-ui {position:absolute; top:50%; right:0; margin-top:-20px; width:83px; overflow:hidden;}
.add-file .btn-ui > a {position:relative; float:left; display:block; width:50%; height:40px; margin-left:-1px; background:#fff; border:1px solid #ccc; box-sizing:border-box;}
.add-file .btn-ui > a:first-child {margin-left:0; border-top-left-radius:2px; border-bottom-left-radius:2px;}
.add-file .btn-ui > a:last-child {border-top-right-radius:2px; border-bottom-right-radius:2px;}
.add-file .btn-ui > a.btn-add:before {content:''; position:absolute; top:50%; left:50%; width:2px; height:14px; margin:-7px 0 0 -1px; background:#8f8f8f;}
.add-file .btn-ui > a.btn-add:after {content:''; position:absolute; top:50%; left:50%; width:14px; height:2px; margin:-1px 0 0 -7px; background:#8f8f8f;}
.add-file .btn-ui > a.btn-del:after {content:''; position:absolute; top:50%; left:50%; width:14px; height:2px; margin:-1px 0 0 -7px; background:#8f8f8f;}


/* 입력 하단 설명글 */
.form-bottom-info {margin-top:10px; color:#999; font-size:14px; line-height:21px;}
/* comm */
.invisible-all {position:absolute; left:-5000px; width:0; height:0; font-size:0; line-height:0; visibility:hidden; overflow:hidden; text-indent:-5000px;}
.invisible {display:none !important;}
.visible {display:block !important;}

.mt-15 {margin-top:-15px !important;}
.mt-20 {margin-top:-20px !important;}
.mt-50 {margin-top:-50px !important;}
.mt-70 {margin-top:-70px !important;}
.mt0 {margin-top:0 !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mt55 {margin-top:55px !important;}
.mt60 {margin-top:60px !important;}
.mt70 {margin-top:70px !important;}
.mt80 {margin-top:80px !important;}
.mt90 {margin-top:90px !important;}
.mt100 {margin-top:100px !important;}
.mt110 {margin-top:110px !important;}
.mt130 {margin-top:130px !important;}
.mt140 {margin-top:140px !important;}

.ml10 {margin-left:10px !important;}
.ml20 {margin-left:20px !important;}

.mr10 {margin-right:10px !important;}
.mr20 {margin-right:20px !important;}
.mr30 {margin-right:30px !important;}

.pt30 {padding-top:30px !important;}

.al-l {text-align:left !important;}
.al-r {text-align:right !important;}
.al-c {text-align:center !important;}

.fl-l {float:left !important;}
.fl-r {float:right !important;}




/* ===========================
	01. layout
=========================== */
/* wrap */
#wrap {overflow:hidden;}


/* dHead */
#dHead {position:fixed; top:0; left:0; width:100%; height:100px; z-index:1005; box-sizing:border-box; -webkit-transition:z-index 0s 0.4s ease; transition:z-index 0s 0.4s ease;}
#dHead.scroll .header-wrap {border-bottom:1px solid rgba(52,52,54,1); background-color:rgba(52,52,54,1);}
#dHead.scroll .header-wrap h1 > a:before {height:100%;}
#dHead.scroll .header-wrap h1 > a:after {height:0;}
#dHead.scroll .gnb-wrap > ul > li > a {color:#fff;}
#dHead.scroll .global-menu > li > a {color:#999; opacity:1;}
#dHead.scroll .global-menu > li:last-child > a {color:#fff; border-color:#555; background:#555;}
#dHead.scroll .gnb-wrap .bar {opacity:1;}

#dHead.basic .header-wrap {border-bottom:1px solid rgba(52,52,54,1); background-color:rgba(52,52,54,1);}
#dHead.basic .header-wrap h1 > a:before {height:100%;}
#dHead.basic .header-wrap h1 > a:after {height:0;}
#dHead.basic .gnb-wrap > ul > li > a {color:#fff;}
#dHead.basic .global-menu > li > a {color:#999; opacity:1;}
#dHead.basic .global-menu > li:last-child > a {color:#fff; border-color:#555; background:#555;}
#dHead.basic .gnb-wrap .bar {opacity:1;}

#dHead.hover { -webkit-transition:z-index 0s 0s ease; transition:z-index 0s 0s ease; z-index:1005;}



.gnb-wrap {position:relative; z-index:1;}
.gnb-wrap > ul {padding-left:296px;}
.gnb-wrap > ul:after {content:''; display:block; clear:both;}
.gnb-wrap > ul > li {position:relative; float:left; padding:0 22px;}
.gnb-wrap > ul > li > a {display:block; color:#fff; font-family:'Noto Sans'; font-size:19px; font-weight:500; line-height:100px; letter-spacing:2.28px; -webkit-transition: color 0.5s ease-out; transition: color 0.5s ease-out;}
.gnb-wrap .bar {position:absolute; bottom:30px; left:0; display:block; width:0; height:3px; background-color:#be161e; opacity:1;}
.gnb-wrap > ul > li.gnb-05 .snb,
.gnb-wrap > ul > li.gnb-06 .snb {display:none !important;}

.snb {position:absolute; top:100px; left:0; display:none;}
.snb .snb-list {z-index:2;}
.snb .snb-list h3{display:none; color:#222; font-family:'Noto Sans' , verdana, sans-serif; font-size:46px;}
.snb .snb-list h3 a {color:#222; font-family:'Noto Sans' , verdana, sans-serif; font-size:46px; cursor:default;}
.snb .snb-list > ul {padding:28px 30px; background:rgba(0,0,0,0.6);}
.snb .snb-list > ul > li {margin-top:18px;}
.snb .snb-list > ul > li:first-child {margin-top:0;}
.snb .snb-list > ul > li > a {position:relative; display:inline-block; color:#fffefe; font-size:14px; line-height:20px; white-space:nowrap;}

.snb-banner {position:relative; display:none; padding:60px 0 60px 278px;}
.snb-banner > ul {width:918px; overflow:hidden;}
.snb-banner > ul > li {position:relative; float:left; width:290px; height:310px; margin-right:16px;}
.snb-banner .cell {position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #e1e1e1; background:#fff; overflow:hidden; box-sizing:border-box; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
.snb-banner .info-wrap {padding:38px 30px;}
.snb-banner .info-wrap .title {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.snb-banner .info-wrap .title > a {color:#222; font-size:18px; font-weight:500;}
.snb-banner .info-wrap .info {max-height:42px; margin-top:25px; font-size:14px; line-height:21px; overflow:hidden;}

.global-menu {position:absolute; top:0; right:0; height:100%; overflow:hidden; z-index:3;}
.global-menu > li {float:left; padding:35px 0 35px 20px;}
.global-menu > li:first-child {padding-left:0;}
.global-menu > li > a {display:block; color:#999; font-size:13px; line-height:30px; opacity:1; -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out;}
.global-menu > li:last-child > a {color:#fff; width:86px; line-height:28px; border:1px solid #555; background:#555;  opacity:1; text-align:center;}




/* contents */
#contents {position:relative; width:100%; padding-top:0px; margin:0 auto; }




/* ===========================
	02. table
=========================== */
/* text-border-list */
table.text-border-list {width:100%; border-top:1px solid #222; border-bottom:1px solid #c8c8c8; background:#fff;  table-layout:fixed;}
table.text-border-list > thead > tr > th {padding:26px 10px; color:#333; font-size:16px; line-height:18px; border-bottom:1px solid #dcdcdc; background-color:#f9f9f9; text-align:center; vertical-align:middle;}
table.text-border-list > tbody > tr > td {height:70px; padding:0 10px; color:#999; font-size:14px; line-height:16px; border-top:1px solid #dcdcdc; text-align:center; vertical-align:middle;}
table.text-border-list td.none-data {padding:100px 10px;}


.table-agree {padding:17px 0;}
.table-agree .info-title {color:#666; font-size:16px;}
.table-agree .info-txt {margin-top:10px;}
.table-agree .info-txt > li{color:#999; font-size:14px; line-height:21px;}
.table-agree table {margin-top:20px;}

.table-bottom-info {margin-top:10px; color:#999; font-size:14px; line-height:21px;}
.table-bottom-info:first-child {margin-top:0;}

/* simple-row-list */
table.simple-row-list {width:100%; border-top:1px solid #222; background:#fff;  table-layout:fixed;}
table.simple-row-list > tbody > tr > th {padding:14px 0 16px 10px; color:#222; font-size:16px; line-height:20px; font-weight:500; border-bottom:1px solid #dcdcdc; background-color:#fff; text-align:left; vertical-align:top;}
table.simple-row-list > tbody > tr > th > p {position:relative;}
table.simple-row-list > tbody > tr > th > p:after {content:''; position:absolute; top:50%; right:0; width:1px; height:16px; margin-top:-6px; background-color:#dcdcdc;}
table.simple-row-list > tbody > tr > td {padding:14px 10px 16px 10px; color:#666; font-size:14px; line-height:20px; border-bottom:1px solid #dcdcdc; background-color:#fff; text-align:right; vertical-align:top;}

/* input table */
table.input-table {width:100%; border-top:1px solid #dcdcdc; border-bottom:1px solid #c8c8c8; background:#fff; table-layout:fixed;}
table.input-table > tbody > tr > th {height:70px; padding:0 30px; color:#222; font-size:16px; line-height:20px; vertical-align:middle; border-top:1px solid #dcdcdc; background-color:#f9f9f9; text-align:left;}
table.input-table > tbody > tr > td {height:44px; padding:13px 30px; color:#666; font-size:16px; line-height:20px; border-top:1px solid #dcdcdc; background-color:#fff; text-align:left; vertical-align:middle;}
table.input-table > tbody > tr:first-child > th,
table.input-table > tbody > tr:first-child > td {border-top:none;}
table.input-table .d-txt {line-height:30px;}
table.input-table .input-info {margin-left:20px; color:#999; font-size:14px; line-height:44px; cursor:inherit;}

/* ===========================
	03. button
=========================== */
.btn-page-wrap {margin-top:60px; text-align:center;}
.btn-page-wrap > a:first-child {margin-left:0;}
.btn-page-wrap > a:last-child {margin-right:0;}

.btn-full-wrap {display:table; width:100%; table-layout:fixed; box-sizing:border-box;}
.btn-full-wrap > li {display:table-cell; vertical-align:top;}
.btn-full-wrap > li > a {position:relative; display:block; height:100%;  margin:0 2px; text-align:center; box-sizing:border-box;}
.btn-full-wrap > li:first-child > a {margin-left:0;}
.btn-full-wrap > li:last-child > a {margin-right:0;}

.btn-content-wrap {}
.btn-content-wrap > ul {margin:-2.5px;}
.btn-content-wrap > ul:after {content:''; display:block; clear:both;}
.btn-content-wrap > ul > li {float:left; width:50%; box-sizing:border-box; padding:2.5px;}
.btn-content-wrap > ul > li > a,
.btn-content-wrap > ul > li > button {display:block; width:auto;}
.btn-content-wrap > ul > li:only-child {width:100%;}

.simple-row-list + .btn-content-wrap {margin-top:30px;}

/* big button (height 56px) */
.btn-01 {display:inline-block; padding:0 54px; margin:0 4px; font-size:20px; line-height:54px; text-align:center;  box-sizing:border-box;}
.btn-01.type-01 {color:#fff; border:1px solid #cb0000; background-color:#cb0000;}
.btn-01.type-02 {color:#222; border:1px solid #999; background-color:#fff;}
.btn-01.type-03 {color:#fff; border:1px solid #8f8f8f; background-color:#8f8f8f;}
.btn-01.type-04 {color:#fff; border:1px solid #282828; background-color:#282828;}
.btn-01.type-05 {color:#fff; border:1px solid #af9375; background-color:#af9375;}