@charset "utf-8";

* { margin: 0; padding: 0; font: inherit; color: inherit; box-sizing: border-box; }
html, body { scroll-behavior: smooth; line-height: 1; -webkit-font-smoothing: antialiased; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

a { text-decoration: none;}
ol, ul { list-style: none;}
img, video {max-width: 100%; vertical-align:top;}
strong, b { font-weight:700;} 
address, em { font-style:normal;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }


select, input, textarea, button { font-size: inherit; vertical-align: middle; border: 0; outline: none; padding:0.5em 0.8em; border-radius: 0; }
input[readonly="readonly"] { background: #f1f1f1 !important; cursor: default; }
select { border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../img/common/select_arrow2.svg) no-repeat calc(100% - 5px) center; background-size: 17px auto; }
button { background-color: transparent; border: 0; cursor: pointer; font: inherit; line-height: inherit; vertical-align: inherit; }
button:focus { outline: none; }
button:disabled { cursor: default;}
textarea { width: 100%; resize: none;}
fieldset, iframe { border: 0; }
pre { white-space: pre-wrap; }


table {	border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
caption, legend { overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); white-space: nowrap; }


input[type="checkbox"]{display:none;}
input[type="checkbox"] + label {position:relative; display:inline-flex; flex-wrap:wrap; align-items:center; vertical-align:middle;}
input[type="checkbox"] + label:before{display:block; content:""; width:18px; height:18px; box-sizing:border-box; border:1px solid #cccccc; background:#fff; border-radius:0px;  margin-right:5px; }
input[type="checkbox"] + label.mr0:before {margin-right: 0px;}
input[type="checkbox"]:checked + label::before{border:6px solid #5b5b5b; border-radius:0px;}
input[type="checkbox"] + label > span {flex:1}

input[type="radio"]{display:none;}
input[type="radio"] + label {position:relative; display:inline-flex; flex-wrap:wrap; align-items:center; vertical-align:middle;}
input[type="radio"] + label:before{display:block; content:""; width:18px; height:18px; box-sizing:border-box; border:1px solid #cccccc; background:#fff; border-radius:100%;  margin-right:5px; }
input[type="radio"]:checked + label::before{border:6px solid #5b5b5b}
input[type="radio"] + label > span {flex:1}
	

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

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


/* 루트 */
:root {
    /* primary-color */
    --default-txt: #000000;
    --sub-txt: #585F74;
    --key-color: #0f6ff8;
    --sub-key-color: #d7f44f;
    --point-color: #A6E6FF;
    --sub-point-color: #FFFF85;
    --deep-key-color: #0051c2;

    /* sub-color */
    --gray-deep: #A5A6AA;
    --gray-mid: #C9CBD2; 
    --gray-lite: #ECEDF2;
    --bg-gray-color: #F8F9FA;
    --bg-blue-color: #F8FDFF;
    --bg-stroke-color: #CFF2FF;

    /* font-basic */
    --font-family:'GmarketSans', 'Pretendard', 'Noto Sans KR', '맑은고딕', 'Malgun Gothic', '돋음', Dotum, 'Nanum Gothic', Arial, Verdana, sans-serif;
    --font-size: 16px;
    --font-weight: 400;
	--line-height:1.5em;

    /* font-style */
    --h2: 700 2.5rem/1.2 var(--font-family);
    --h3: 700 2rem/1.2 var(--font-family);
    --h4: 700 1.6rem/1.2 var(--font-family);

    --cont-inner: 1660px;
    --inner: 1480px;
    --sub-inner: 1280px;
}


body { font-weight: var(--font-weight); font-family: var(--font-family); font-size: var(--font-size); color: var(--default-txt); line-height:var(--line-height);}
body::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-thumb { background-color:#ccc; /* 스크롤바 색상 */ border-radius: 10px; /* 스크롤바 둥근 테두리 */ }
body::-webkit-scrollbar-track { background-color: transparent;  /*스크롤바 뒷 배경 색상*/ }
a { color: var(--default-txt); }

h2 { font: var(--h2); }
h3 { font: var(--h3); }
h4 { font: var(--h4); }


.t-black { color: var(--main-black); }
.t-key { color: var(--key-color); }
.t-deep { color: var(--deep-key-color); }
.t-sub { color: var(--sub-key-color); }
.t-point { color: var(--point-color); }


.hidden { display: none; width: 0; height: 0; text-indent: -9999px; overflow: hidden; }
#accessibility, .skip, hr, legend {position:absolute;width:0; height:0; font-size:0; line-height:0;overflow:hidden; visibility:hidden ;}
#skipToContent {font-size: 0; left: 0;line-height: 0;position: absolute;top: -30px;	width: 100%;z-index: 999999;}
#skipToContent a:active, #skipToContent a:focus {font-size:13px;background-color: #333333;border: medium none;color: #FFFFFF;height: 30px;left: 0;position: absolute;text-align: center;text-decoration: underline;top: 30px;line-height: 30px;width: 100%;display: block;}
body.fixe {overflow:hidden;}

.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }

.displayBlock { display: block; }
.displayInline { display: inline; }
.displayNone { display: none; }

.tc { text-align: center; justify-content: center;}
.tl { text-align: left; justify-content: flex-start;}
.tr { text-align: right; justify-content: flex-end;}
.ac {align-items: center !important;}

.video_wrap, .youtube_wrap {padding-bottom:calc(585 / 1040 * 100%); position:relative;}
.video_wrap iframe, .youtube_wrap iframe {position:absolute; left:0px; top:0px; width:100% !important; height:100% !important;}

.loading_area {position:fixed; width:100%; height:100%; z-index:99999;}
.loading_area #bg {background-color:#000; display:block; height:100%; left:0;  opacity:0.5; filter:alpha(opacity=50); position:fixed; top:0; width:100%; z-index:9999;}
.loading_area .loading_img { position:fixed; left:50%; top:50%; z-index: 99999}
.loader {height: 4px; width: 100%; position: absolute; left:0px; top: 0px;z-index: 99999; overflow: hidden; background-color: #ddd;}
.loader:before{display: block; position: absolute; content: ""; left: -200px; width: 200px; height: 4px; background-color: #d53f41; animation: loading 2s linear infinite;}

.input, .select, .textarea {border-radius:4px; border:1px solid #dcdcdc;}

.bul01 > li {padding-left:0.8em; position: relative;}
.bul01 > li:before {content:""; width:3px; height:3px; border-radius:100%; background: var(--deep-key-color); position:absolute; left: 0px; top: 0.6em;}
.bul01 > li:not(:first-child) {margin-top:0.4em;}
.bul02 > li {padding-left:1em; text-indent:-1em;}
.bul02 > li:not(:first-child) {margin-top:0.4em;}

.padding_no {padding:0px !important}

.radio_group {display: flex; flex-wrap: wrap; gap:0.5em 1em}


@media print {
	@page {
	  size: A4;
	  margin: 1cm;
	}
	body {zoom:80%; transform: scale(1);transform-origin: top left;}
	* {-webkit-print-color-adjust: exact;print-color-adjust: exact;}
	.section, .content, .box {page-break-inside: avoid;  break-inside: avoid;}
	.no_print {display: none;}
	
  }

 

@media screen and (max-width:768px){}