@charset "utf-8";

/* 변수설정 */
:root {
	--main-wrap-size: calc(100% - 60px);
	--main-wrap-gap: 30px; /* main-wrap-size에서 빼준 값의 반값 */
	--max-width: 1400px;
	--main-color: #373737;
	--redC-ll: #fbf0f0;
	--redC-l: #ff5a5a;
	--redC: #f33e3e;
	--redC-m: #ff593e;	
	--redC-d: #d72b2b;
	--blueC: #233f80; /* 주요 파랑색 */
	--blueC-ll: #f6f9ff;
	--blueC-l: #eff2f9;
	--blueC-m: #5f7feb;
	--blueC-mm: #728ec7;	
	--blueC-d: #235dd0;
	--grayC: #868686;
	--grayC-ll: #f4f4f4;
	--grayC-lll: #f7f7f7;
	--grayC-l: #ededed;
	--grayC-m: #e4e4e4;
	--grayC-d: #a6a6a6;
	--grayC-dd: #323232;
	--grayC-ddd: #929292;
	--mintC-ll: #ebfafa;
	--mintC-l: #51e0e2;
	--mintC: #2bd5d7;
	--mintC-m: #11cdcd;
	--mintC-d: #0fbcbc;
	--yellowC-ll: #fdfbef;
	--yellowC-l: #f8f3d6;
	--yellowC: #ffd05f;
	--yellowC-d: #fdc02e;
	--puppleC-ll: #f4eef9;
	--puppleC-l: #cb576e;
	--puppleC: #9d3248;
	--puppleC-d: #8b172f;
	--goldC-ll: #ede7d9;
	--goldC-l: #cfbcac;
	--goldC: #b7a290;
	--goldC-d: #ab8d73;
	--orangeC-l: #f0b777;
	--orangeC: #f94926;
	--oliveC: #a7a738;
	--greenC: #23966c;

	/*new color guide*/
	--red100: #feebeb;
	--red200: #fee0e0;
	--red300: #fcbfbf;
	--red400: #ff6256;
	--red500: #dd2d2d;	
	--red600: #c42828;
	--red700: #b82626;
	--red800: #931e1e;
	--red900: #6e1616;
	--blue100: #e9f2fd;
	--blue200: #deecfb;
	--blue300: #bbd8f8;
	--blue400: #2381e7;
	--blue500: #2074d0;	
	--blue600: #1c67b9;
	--blue700: #1a61ad;
	--blue800: #154d8b;
	--blue900: #073b77;
	--gray100: #f5f5f5;
	--gray200: #f0f0f0;
	--gray300: #d1d1d1;
	--gray400: #9e9e9e;
	--gray500: #8e8e8e;	
	--gray600: #777777;
	--gray700: #5f5f5f;
	--gray800: #474747;
	--gray900: #373737;
	--mint100: #e8fbf8;
	--mint200: #ddf9f5;
	--mint300: #95e9dc;
	--mint400: #44e2ca;
	--mint500: #22d7bc;	
	--mint600: #1dbba3;
	--mint700: #14a48e;
	--mint800: #108371;
	--mint900: #0c6255;
	--green100: #cbdb7d;
	--green200: #e1f8e8;
	--green300: #a4b445;
	--green400: #9bae2e;
	--green500: #68d2ab;
	--green600: #51c098;
	--green700: #3aab82;
	--green700-1: #48af42;
	--green800: #23966c;
	--green900: #059841;
	--green900-1: #19713d;
	--purple100: #f8eefa;
	--purple200: #f5e5f7;
	--purple300: #eacaee;
	--purple400: #bc54c9;
	--purple500: #a94cb5;	
	--purple600: #9643a1;
	--purple700: #713279;
	--purple800: #55265a;
	--purple900: #421d46;
	--orange100: #fff3e8;
	--orange200: #ffe2c7;
	--orange300: #ffd9b6;
	--orange400: #ffad56;
	--orange500: #ff9d33;	
	--orange600: #ff9019;
	--orange700: #ff8400;
	--orange800: #ff7d13;
	--orange900: #ff7200;
	--yellow100: #fffadb;
	--yellow200: #fff299;
	--yellow300: #ffeb63;
	--yellow400: #ffe84a;
	--yellow500: #ffe42e;	
	--yellow600: #ffe11b;
	--yellow700: #ffde00;
	--yellow800: #ffc512;
	--yellow900: #ffbf12;
	--brown100: #fff2e2;
	--brown200: #f2dbc0;
	--brown300: #ddbb92;
	--brown400: #c18c6f;
	--brown500: #ab7f5b;	
	--brown600: #986d4b;
	--brown700: #7d5535;
	--brown800: #6f4522;
	--brown900: #603817;

    --main-100: #1E313E;
    --main-200: #4ABF4F;
    --main-200-1: linear-gradient(135deg, rgba(75, 174, 79, 1), rgba(133, 206, 54, 1));
    --main-200-2: #61DD96;
    --main-300: #548CF8;
    --main-400: #ECF0F3;
    --main-500: #454545;
    --main-600: #e8e8e8;
    --main-600-font: #343434;
    --main-700: #F86666;

    /* mainBg */
    --main-bg-01: #2a59a1;
    --main-bg-02: #615681;
    --main-bg-03: #5d5d5d;
    --main-bg-04: #458b47;
    --main-btn-blue: #092c5b;

	--base-font: 1.6rem;
	--font-xs: 1.3rem;
	--font-s: 1.5rem; 
	--font-m: 1.7rem; 
	--font-ml: 2rem; 
	--font-l: 2.3rem; 
	--font-lg: 3rem; 
	--font-normal: 500;
	--font-bold: bold;
	--font-black: 800;
	--base-family: 'Noto Sans KR';
	--eng-family: 'SEBANG_Gothic'; 
	--base-border: 1px solid #ddd; 
	--base-border-2x: 2px solid #ddd; 
	--translate: translate(-50%, 0);
	--calc-2: calc(100% / 2);
	--calc-3: calc(100% / 3);
	--calc-4: calc(100% / 4);
	--calc-5: calc(100% / 5);
	--calc-6: calc(100% / 6);
	--calc-7: calc(100% / 7);
	--calc-8: calc(100% / 8);
	--calc-9: calc(100% / 9);
	--base-radius: 5px;
	--btn-height-xs: 40px;
	--btn-height-s: 44px;
	--btn-height: 50px;
	--btn-height-l: 54px;
	--btn-height-xl: 60px;
	--btn-height-xxl: 70px;

	--pop-padding: 20px;
    --base-padding: 20px;
    --pop-border-radius: 10px;
    --pda-border-radius: 5px;
}
@media (max-width: 979px) {	
	:root {
		--main-wrap-size: calc(100% - 40px);
		--main-wrap-gap: 20px;
	}
}
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
blockquote, p, address, pre, cite, i,
form, fieldset, input, textarea, select,
table, th, td { margin:0; padding:0; }
a{text-decoration: none; }

/*기본폰트지정*/
html { font-size: 10px; font-family: var(--base-family); }
body{ min-height: 100vh; font-size: var(--base-font); line-height: 1.5; overflow: hidden; }
 
/* 제목요소 */
h1, h2, h3 { font-weight: var(--font-bold); font-family: var(--eng-family); }
h1 { font-size: 2.4rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.7rem; font-weight: var(--font-bold); }


/* 테두리 없애기 */
fieldset, img, abbr, acronym { border:0 none; } 

/* 목록 */
ul { list-style:none; }
 
/* 테이블 - 마크업에 'cellspacing="0"' 지정 함께 필요 */
table { border-collapse: collapse; border-spacing:0; border:0 none; width: 100%;}
caption { position: absolute; overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; }

/* 텍스트 관련 요소 초기화 */
address, caption, em, cite, i { font-weight: var(--font-normal); font-style:normal; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
 
/* 인용문 */
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote,q { quotes:"" ""; }
 
/* 이미지 */
img {border: 0 none;}

/* textarea */
textarea { width: 100%; font-family: var(--base-family); font-size: 3rem; border: var(--base-border); padding: 10px; }
input, select { font-family: var(--eng-family); }

/* 숨김 */
.blind, .hidden, legend { display: block; left: 0; overflow: hidden; position: absolute; top: -1000em;}


button, a {	cursor: pointer; }

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*------------------------------------------------------------------------------------------
	form 
------------------------------------------------------------------------------------------*/
label { background:none; vertical-align:middle; }
input:required, 
textarea:required { outline:none; }
input[type="text"], 
input[type="date"], 
input[type="time"], 
input[type="email"], 
input[type="password"],
input[type="file"],
input[type="tel"] {
	width: 100%;
	height: var(--btn-height);
	line-height: var(--btn-height);
	font-size: 3rem;
	color: var(--main-color);
	border: var(--base-border);
	padding: 0 10px;
}
input[type="text"]:focus, 
input[type="date"]:focus, 
input[type="time"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus { 
	background-color: var(--blueC-l);
	border: 2px solid #000;
}
select:focus { outline:none; }

input[type="text"]:required,
input[type="date"]:required, 
input[type="time"]:required, 
input[type="email"]:required, 
input[type="password"]:required,
input[type="tel"]:required,
textarea:required { }


.input-size-xl {
	 height: var(--btn-height-xl)!important;
	 line-height: var(--btn-height-xl)!important;
}

/*------------------------------------------------------------------------------------------
	input - radio 
------------------------------------------------------------------------------------------*/

/* 기본 radio */
input[type="radio"] { overflow:hidden; clip:rect(0 0 0 0); height:1px; width:1px; padding:0; border:0; display:none;}
input[type="radio"] + label {
	width: auto;
	height: 60px;
	line-height: 60px;
	background: url('/res/images/0077/pda/ourhome_0077_radio2.png') no-repeat 0 0;
	padding-left: 70px;  
	padding-right: 10px;
	background-size: 60px; 
	font-weight: normal;
	font-size: 3rem;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(255,255,255,0); 
	display: inline-block; 
}
input[type="radio"]:checked + label {
	background: url('/res/images/0077/pda/ourhome_0077_radio2.png') no-repeat 0 -60px;
	background-size: 60px; 
}
input[type="radio"]:disabled + label { background-position: 0 -120px; }


/* 선택형 radio */
.radioType {
	overflow: hidden;
}
.radioType input[type="radio"] {
	float: left;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	font-size: 0;
	text-indent: -9999px;
}
.radioType input[type="radio"] + label {
	min-width: 100px;
	min-width: 70px;
	height: var(--btn-height);
	line-height: var(--btn-height);
	font-size: 3rem;
	color: var(--main-color);	
	border: var(--base-border-2x);
	border-right: var(--base-border);
	border-left: 0;
	font-family: var(--eng-family);
	font-weight: var(--font-bold);
	text-align: center;
	padding: 0 35px;
	background: none;
	background-color: #fff;
	margin-bottom: 0;
	float: left;
}

.radioType input[type="radio"]:first-child + label { border-radius: 5px 0 0 5px; border-left: var(--base-border-2x); }
.radioType input[type="radio"] + label:last-child { border-right: var(--base-border-2x); border-radius: 0 5px 5px 0; }

.radioType.type_color input[type="radio"] + label {
	border: 2px solid var(--grayC-l);
	border-right: var(--base-border);
	border-left: 0;
}
.radioType.type_color input[type="radio"]:first-child + label { border-left: 2px solid var(--grayC-l); }
.radioType.type_color input[type="radio"] + label:last-child { border-right: 2px solid var(--grayC-l); }

.radioType.type_color_border input[type="radio"].no + label {
	border: 2px solid var(--redC);
	border-right: var(--base-border);
    color: var(--redC);
	border-left: 0;
}
.radioType.type_color_border input[type="radio"].no:first-child + label {
	border-left: 2px solid var(--redC);
}
.radioType.type_color_border input[type="radio"].no + label:last-child {
	border-right: 2px solid var(--redC);
}
.radioType.type_color_border input[type="radio"].yes + label {
	border: 2px solid var(--mintC);
	border-right: var(--base-border-2x);
    color: var(--mintC);
	border-left: 0;
}
.radioType.type_color_border input[type="radio"].yes:first-child + label {
	/* border-left: var(--color-border-2x); */
	border-left: 2px solid var(--mintC);
}
.radioType.type_color_border input[type="radio"].yes + label:last-child {
	border-right: var(--color-border-2x);
}
.radioType.type_color_border input[type="radio"].none + label {
    border: var(--base-border-2x);
	border-right: var(--base-border);
	border-left: 0;
}
.radioType.type_color_border input[type="radio"].none:first-child + label {
	border-left: var(--base-border-2x);
}
.radioType.type_color_border input[type="radio"].none + label:last-child {
	border-right: var(--base-border-2x);
}

.radioType input[type="radio"].no:checked + label {
	border: var(--red-border-2x);
	border-right: var(--base-border);
	background-color: var(--redC);
    color: #fff;
	line-height: calc(var(--btn-height) + 2px);
}
.radioType input[type="radio"].yes:checked + label {
	border: var(--color-border-2x);
	border-right: 2px solid var(--mintC);
	background-color: var(--mintC);
    color: #fff;
	line-height: calc(var(--btn-height) + 2px);
}
.radioType input[type="radio"].none:checked + label {
    border: var(--base-border-2x);
	border-left: 0;
    background-color: var(--grayC-l);
	line-height: calc(var(--btn-height) + 2px);
}



/*------------------------------------------------------------------------------------------
	input - checkbox 
------------------------------------------------------------------------------------------*/

/* 기본 checkbox */
input[type="checkbox"] { overflow:hidden; clip:rect(0 0 0 0); height:1px; width:1px; padding:0; border:0; display:none;}
input[type="checkbox"] + label {
	width: auto;
	height: 35px;
	line-height: 22px;
	background: url("/res/images/0077/pda/ourhome_0077_checkbox2.png") no-repeat 0 0;
/*	padding-left: 40px;  */
	background-size: 35px; 
	font-weight: normal;
	font-size: 1.8rem;
	cursor: pointer;
	-webkit-tap-highlight-color:rgba(255,255,255,0); 
	display: inline-block;  
}
input[type="checkbox"]:checked + label {
	background: url("/res/images/0077/pda/ourhome_0077_checkbox2.png") no-repeat 0 -35px;
	background-size: 35px; 
}
input[type="checkbox"]:disabled + label {background-position: 0 -70px;}



/*------------------------------------------------------------------------------------------
	input - file
------------------------------------------------------------------------------------------*/
.fileUploader label {
  display: inline-block;
  float: right;
  width: 100px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 3rem;
  color: #999;
  background-color: #fdfdfd;
  cursor: pointer;
  border: 1px solid #ebebeb;
  border-bottom-color: #e2e2e2;
  border-radius: 5px;
}

.fileUploader input[type="file"] {  /* 파일 필드 숨기기 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0);
  border: 0;
}
.fileUploader .upload-name {
  display: inline-block;
  float: left;
  width: calc(100% - 110px);
  height: 45px;
  line-height: 45px;
  padding: 0 10px;
  font-size: 3rem;
  background-color: #f5f5f5;
  border: 1px solid #ebebeb;
  border-bottom-color: #e2e2e2;
  border-radius: .25em;
  -webkit-appearance: none; /* 네이티브 외형 감추기 */
  -moz-appearance: none;
  appearance: none;
}


/*------------------------------------------------------------------------------------------
	select 
------------------------------------------------------------------------------------------*/
select {
	width: 100%;
	height: 70px;
	line-height: 70px;
	font-family: var(--eng-family);
	font-size: 3rem;
	padding-left: 5px;
	padding-right: 20px;
	padding-top: 5px;
	margin: 0;
	border: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}
select::-ms-expand {
	display: none;
}
.select {
	width: 100%;
	height: 74px;
	border: var(--base-border);
	background: #fff;
	position: relative;
	cursor: pointer;
	display: inline-block;
}
.select i {
	line-height: 70px;
	position: absolute;
	top: 50%;
	right: 10px;
	color: rgba(0,0,0,0.8);
	font-size: 2rem;
	font-weight: var(--font-bold);
	margin-top: -40px;
	pointer-events: none;
}



/*------------------------------------------------------------------------------------------
	form 
------------------------------------------------------------------------------------------*/
.lnlineBox {
	display: flex;
	gap: 5px;
	font-family: var(--eng-family);
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 30px;
}
.lnlineBox label {
	width: 25%;
	height: 74px;
	line-height: 74px;
	color: #000;
}
.lnlineBox label.twoBr {
	line-height: 35px;
}
.lnlineBox input {
	width: 75%;
	height: 74px;
	line-height: 74px;
	font-family: var(--eng-family);
	font-size: 3rem;
}
.lnlineBox input[type="text"] {
	line-height: 66px;
	padding-top: 8px;
}
.lnlineBox .select.short, .lnlineBox input.short {
	width: 27%;
}
.lnlineBox .select.shortS, .lnlineBox input.shortS {
	width: 15%;
}
.lnlineBox .select.shortL, .lnlineBox input.shortL {
	width: calc(61% - 2px);
}
.lnlineBox .select + .swing, .lnlineBox input + .swing {
	width: 2%;
}
.lnlineBox input.hasSelect {
	width: 48%;
}
.lnlineBox input.hasSelect.short {
	width: calc(30% - 5px);
}
.lnlineBox input.hasBtn {
	width: calc(55% - 5px);
}
.lnlineBox.searchBox {
	margin-bottom: 20px;
}
.lnlineBox.searchBox input.hasBtn {
	width: calc(85% - 5px);
}
.lnlineBox span.noData {
	float: left;
	width: 50px;
	height: 5px;
	margin-top: 30px;
	background: #000;
}
.lnlineBox input[type="radio"] {
	width: 20px;
	height: 20px;
	border: 1px solid #ddd;
}
.lnlineBox p.dataInfo {
	line-height: var(--btn-height);
	font-size: 2.6rem;
	font-weight: normal;
	padding-left: 20px;
	color: rgba(0,0,0,0.7);
}
.lnlineBox p.dataInfo i {
	padding-right: 5px;
	margin-top: -2px;
	float: left;
}
.inputWrap {
	width: 75%;
}
.inputWrap .radioBox {
	margin-bottom: 5px;
}
.inputWrap .radioBox:last-child {
	margin-bottom: 0;
}
.addBox {
	width: calc(55% - 5px);
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.addBox input {
	width: calc(50% - 5px);
}
.inTableBtn {
	width: 20%;
	height: 72px;
	line-height: 68px;
	background: #323546;
	border: 1px solid #323546;
	color: #fff;
	font-size: 2.2rem;
	font-family: var(--eng-family);
	padding-top: 5px;
	border-radius: 5px;
	text-align: center;
	display: inline-block;
}
.inTableBtn.color {
	background: #09946b;
	border: 1px solid #09946b;
}




/*------------------------------------------------------------------------------------------
	btn 
------------------------------------------------------------------------------------------*/

/* 하단버튼 */
.footerFixedButton {
	width: 100%;
	position: fixed;
	bottom: 0;
}
.footerFixedButton a {
	width: 100%;
	height: var(--btn-height-s);
	line-height: var(--btn-height);
	background-color: var(--green900);
	color: #fff;
	padding: 0 15px;
	text-align: center;
	font-size: var(--font-lg);
	font-family: var(--eng-family);
	font-weight: bold;
	display: block;
}
.footerFixedButton a i {
	line-height: var(--btn-height-s);
}

/* 3D Button */
a.btn-3d, button.btn-3d {
	width: calc(100% - 40px);
	height: var(--btn-height-s);
	line-height: var(--btn-height-s);
	padding: 0 15px;
	font-size: var(--font-lg);
	color: white;
	margin: 0 20px 28px 20px;
	position: relative;
	display: inline-block;
	border-radius: 6px;
	text-align: center;
	transition: top .01s linear;
	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.btn-3d.red:hover    {background-color: #e74c3c;}
.btn-3d.blue:hover   {background-color: #699DD1;}
.btn-3d.green:hover  {background-color: #80C49D;}
.btn-3d.purple:hover {background-color: #D19ECB;}
/* .btn-3d.yellow:hover {background-color: #F0D264;} */
.btn-3d.cyan:hover   {background-color: #82D1E3;}

.btn-3d:active {
  top: 9px;
}

/* 3D button colors */
.btn-3d.red {
  background-color: #e74c3c;
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 #C24032,
        0 8px 0 1px rgba(0,0,0,0.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.red:active {
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.blue {
  background-color: #6DA2D9;
  box-shadow: 0 0 0 1px #6698cb inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(110, 164, 219, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.blue:active {
  box-shadow: 0 0 0 1px #6191C2 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.green {
  background-color: #82c8a0;
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(126, 194, 155, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.green:active {
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.purple {
  background-color: #cb99c5;
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(189, 142, 183, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.purple:active {
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.cyan {
  background-color: #7fccde;
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(102, 164, 178, .6),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.cyan:active {
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

/* .btn-3d.yellow {
  background-color: #F0D264;
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(196, 172, 83, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.yellow:active {
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
} */

.btn-3d.orange {
  background-color: #f8bb02;
  box-shadow: 0 0 0 1px #f89e02 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(248, 158, 2, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.orange:active {
  box-shadow: 0 0 0 1px #f89e02 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}


/*------------------------------------------------------------------------------------------
	etc 
------------------------------------------------------------------------------------------*/
.whiteC { color: #fff!important; }
.blackC { color: #000!important; }
.redC { color: var(--redC)!important; }
.redC-m { color: var(--redC-m)!important; }
.redC-d { color: var(--redC-d)!important; }
.blueC { color: var(--blueC)!important; }
.blueC-ll { color: var(--blueC-ll)!important; }
.blueC-l { color: var(--blueC-l)!important; }
.blueC-m { color: var(--blueC-m)!important; }
.blueC-mm { color: var(--blueC-mm)!important; }
.blueC-d { color: var(--blueC-d)!important; }
.grayC-ll { color: var(--grayC-ll)!important; }
.grayC-l { color: var(--grayC-l)!important; }
.grayC-m { color: var(--grayC-m)!important; }
.grayC-d { color: var(--grayC-d)!important; }
.grayC-dd { color: var(--grayC-dd)!important; }
.mintC { color: var(--mintC)!important; }
.mintC-l { color: var(--mintC-l)!important; }
.mintC-m { color: var(--mintC-m)!important; }
.mintC-d { color: var(--mintC-d)!important; }
.yellowC { color: var(--yellowC)!important; }
.yellowC-d { color: var(--yellowC-d)!important; }
.yellowC-l { color: var(--yellowC-ll)!important; }
.orangeC { color: var(--orangeC)!important; }
.oliveC { color: var(--oliveC)!important; }
.puppleC { color: var(--puppleC)!important; }
.greenC { color: var(--greenC)!important; }

.whiteBg { background-color: #fff!important; }
.blackBg { background-color: #000!important; }
.redBg { background-color: var(--redC)!important; }
.redBg-m { background-color: var(--redC-m)!important; }
.redBg-d { background-color: var(--redC-d)!important; }
.blueBg { background-color: var(--blueC)!important; }
.blueBg-ll { background-color: var(--blueC-ll)!important; }
.blueBg-l { background-color: var(--blueC-l)!important; }
.blueBg-m { background-color: var(--blueC-m)!important; }
.blueBg-mm { background-color: var(--blueC-mm)!important; }
.blueBg-d { background-color: var(--blueC-d)!important; }
.grayBg-ll { background-color: var(--grayC-ll)!important; }
.grayBg-l { background-color: var(--grayC-l)!important; }
.grayBg-m { background-color: var(--grayC-m)!important; }
.grayBg-d { background-color: var(--grayC-d)!important; }
.grayBg-dd { background-color: var(--grayC-dd)!important; }
.mintBg { background-color: var(--mintC)!important; }
.mintBg-l { background-color: var(--mintC-l)!important; }
.mintBg-m { background-color: var(--mintC-m)!important; }
.mintBg-d { background-color: var(--mintC-d)!important; }
.yellowBg { background-color: var(--yellowC)!important; }
.yellowBg-d { background-color: var(--yellowC-d)!important; }
.yellowBg-l { background-color: var(--yellowC-ll)!important; }
.puppleBg { background-color: var(--puppleC)!important; }
.goldBg { background-color: var(--goldC)!important; }
.goldBg-d { background-color: var(--goldC-d)!important; }
.orangeBg { background-color: var(--orangeC)!important; }
.oliveBg { background-color: var(--oliveC)!important; }

.text-left { text-align: left!important; }
.text-center { text-align: center!important; }
.text-right { text-align: right!important; }

.radiusRing { border-radius: 50%!important; }

.bold { font-weight: var(--font-bold)!important; }

.float-left { float: left!important; }
.float-right { float: right!important; }

.m-auto {margin: 0 auto;}

.mt-0 { margin-top: 0!important; }
.mt-10 { margin-top: 10px!important; }
.mt-20 { margin-top: 20px!important; }
.mt-30 { margin-top: 30px!important; }
.mt-40 { margin-top: 40px!important; }
.mt-50 { margin-top: 50px!important; }
.mt-80 { margin-top: 80px!important; }
.mt-90 { margin-top: 90px!important; }
.mt-100 { margin-top: 100px!important; }
.mt-110 { margin-top: 110px!important; }
.mb-0 { margin-bottom: 0px!important; }
.mb-5 { margin-bottom: 5px!important; }
.mb-10 { margin-bottom: 10px!important; }
.mb-15 { margin-bottom: 15px!important; }
.mb-20 { margin-bottom: 20px!important; }
.mb-50 { margin-bottom:50px;}
.mb-60 { margin-bottom:60px;}
.mr-5 { margin-right: 5px!important; }
.mr-10 { margin-right: 10px!important; }
.ml-5 {margin-left: 5px !important;}

.pd-0 {padding: 0 !important;}
.pt-0 {padding-top: 0 !important;}
.pt-10 {padding-top: 10px !important;}
.pt-15 {padding-top: 15px !important;}
.pt-18 {padding-top: 18px !important;}
.pb-0 {padding-bottom: 0 !important;}
.pl-5 {padding-left: 5px !important;}
.pl-10 {padding-left: 10px !important;}
.pr-5 {padding-right: 5px !important;}
.pr-10 {padding-right: 10px !important;}


.w10p { width:10%!important; }
.w20p { width:20%!important; }
.w30p { width:30%!important; }
.w40p { width:40%!important; }
.w45p { width:45%!important; }
.w46p { width:46%!important; }
.w50p { width:50%!important; }
.w60p { width:60%!important; }
.w66p { width:66%!important; }
.w68p { width:68%!important; }
.w69p { width:69%!important; }
.w70p { width:70%!important; }
.w100p { width:100%!important; }

.swing {
	width: 8%;
	line-height: 60px;
	font-family: var(--eng-family);
	color: #000;
	font-size: 3.8rem;
	padding-top: 7px;
	text-align: center;
	display: inline-block;
}




.type2 {
	background-color: #384bff;
}




.layerMask { display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.8);  z-index: 999;}
.layerWrap {
	width: 100%;
	max-width: 960px;
	background: #fff;
	border-radius: 30px;
	font-family: 'GmarketSansMedium';
	position: absolute;
	left: 50%;
	top: 50%;	
	transform: translate(-50%, -50%);
}
.layerWrap.show {
	position: absolute;
	left: 50%;
	top: 50%;	
	transform: translate(-50%, -50%);
}
.viewTop {
	border-bottom: 1px solid #ddd;
	padding: 10px 20px 15px;
	color: var(--blueC);
	position: relative;
}
.viewTop button {
	outline: 0;
	background-color: transparent;
	border: 0;
	font-size: 3rem;
	color: #333;
	position: absolute;
	right: 20px;
	top: 15px;
}
.viewCon {
	padding: 20px 20px 30px;
}
.sTitle {
	font-weight: bold;
	padding-bottom: 5px;
	font-size: 2rem;
}
.tableType01 {
	
}
.tableType01 tbody th { 
	text-align: left; 
	background-color: #F2F2F2;
	padding: 5px;
	border: 1px solid #ddd;
	font-size: 1.3rem;
}
.tableType01 tbody td { 
	padding: 5px;
	border: 1px solid #ddd;
	font-size: 1.4rem;
	font-family: 'Arial';
}
.viewImg {
    text-align: center;
    background: #fffff0;
    padding: 30px 0;
    border-radius: 30px;
}