@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; -webkit-tap-highlight-color: transparent;}
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  !important; background-color: #fff; line-height: 1.4em; }
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; align-items:center; vertical-align:middle;}
input[type="checkbox"] + label:before{display:block; content:""; min-width:clamp(24px, 3vw, 30px); height:clamp(24px, 3vw, 30px); box-sizing:border-box; border:1px solid #cccccc; background:#fff; border-radius:4px;  margin-right:5px; align-self:flex-start;}
input[type="checkbox"] + label.mr0:before {margin-right: 0px;}
input[type="checkbox"]:checked + label::before{background:url(../img/common/check.svg) no-repeat center center var(--key-color); border-color:var(--key-color); background-size:70% auto;}
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:""; min-width:clamp(24px, 3vw, 30px); height:clamp(24px, 3vw, 30px); box-sizing:border-box; border:1px solid #cccccc; background:#EFF3F6; border-radius:100%;  margin-right:5px; align-self:flex-start;}
input[type="radio"]:checked + label::before{background:url(../img/common/check.svg) no-repeat center center var(--key-color); border-color:var(--key-color);  background-size:70% auto;}
input[type="radio"] + label > span {flex:1}



/* 루트 */
:root {
    /* primary-color */
    --default-txt: #000000;
    --sub-txt: #585F74;
    --key-color: #004695;
    --sub-key-color: #156EE8;
    --point-color: #cc1427;
    --sub-point-color: #ea384f;
    --deep-key-color: #893dcc;
	--main-black:#000000;

    /* 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:'Noto Sans KR', '맑은고딕', 'Malgun Gothic', '돋음', Dotum, 'Nanum Gothic', Arial, Verdana, sans-serif;
    --font-size: 16px;
    --font-weight: 400;
	  --line-height:1.5em;
    --key-font:'GmarketSans';

    /* 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: 1740px;
    --inner: 1440px;
}


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;  /*스크롤바 뒷 배경 색상*/ }

.scroll_box::-webkit-scrollbar { width: 6px; }
.scroll_box::-webkit-scrollbar-thumb { background-color:#ccc; /* 스크롤바 색상 */ border-radius: 10px; /* 스크롤바 둥근 테두리 */ }
.scroll_box::-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) !important; }
.t-key { color: var(--key-color); }
.t-sub { color: var(--sub-key-color); }
.t-point { color: var(--point-color); }
.t-dkey { color: var(--deep-key-color); }
.key-box {background:var(--key-color); padding:1em 1.5em}

.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 !important; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }

/* 폰트 사이즈 */
.xxx-large-font {font-size: var(--xxx-large-font-size);}
.xx-large-font {font-size: var(--xx-large-font-size);}
.x-large-font {font-size: var(--x-large-font-size);}
.large-font {font-size: var(--large-font-size);}
.font {font-size: var(--font-size);}
.sub-font {font-size: var(--sub-font-size);}
.small-font {font-size: var(--small-font-size);}
.x-small-font {font-size: var(--x-small-font-size);}

.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;}

.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 {border-radius:4px; border:1px solid #dcdcdc;}
.bul01.two {display: flex; flex-wrap: wrap; gap:0.4em}
.bul01.two > li {margin:0px !important; flex:48%}

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

.bul_a > li {padding-left: 1em; text-indent: -1em;}
.bul_a > li:has(ul) + li {margin-top: 1em;}
.bul_b > li {padding-left: 1.2em; text-indent: -1.2em;}
.bul_c > li {padding-left: 1.4em; text-indent: -1.4em;}
.black > li:before {background: #000;}

.pt0 {padding-top:0px !important}
.pl0 {padding-left:0px !important}
.mt0 {margin-top:0px !important}
.mt3 {margin-top:3px !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}

.radio_group {display: flex; flex-wrap: wrap; gap:0.5em 1em}
.note {font-size: var(--sub-font-size);}
.ico_note {position:relative; display:flex; align-items:center; gap:5px}
.ico_note:before {display:block; content:""; width:22px; height:20px; box-sizing:border-box; border-bottom:18px solid var(--key-color); border-left:10px solid transparent; border-right:10px solid transparent; border-radius:4px; }
.ico_note:after {display:block; content:"!"; width:22px; height:20px; color:#fff; font-size:14px; font-weight:600; text-align:center; line-height:1.8em; position:absolute; left:0px; top:50%; transform:translateY(-50%)}
.rule_box {font-size: var(--sub-font-size); line-height:1.4em;}
.rule_box .h2 {margin-top:1em; font-weight:700; font-size:1.05em; line-height:1.4em;}
.scrollbox {overflow: auto; border:1px solid #ccc; padding: clamp(10px, 2vw, 25px); max-height:15em;}
.scrollbox .rule_box {overflow: auto; max-height:15em;}
.scrollbox:has(.rule_box) { max-height: none;  border-radius: clamp(8px, 2vw, 16px);}


/* 버튼 */
.btn_group {display: flex; gap:10px; border-top:clamp(1px, 1vw, 1px) solid #000; margin-top:clamp(25px, 5vw, 50px); padding-top:clamp(25px, 5vw, 50px)}

a.btnStyle, .btnStyle {display: inline-flex; line-height: 1.4em; align-items: center; justify-content: center; text-align: center; width:100%; padding:0px 1em; color: #fff; border-radius:40px; position: relative;}
a.btnStyle .ico, .btnStyle .ico {position: absolute; right:0.7em; max-height:35%; max-width:5vw;}

.btnSmall {font-size:var(--small-font-size); height:3em; font-weight:500}
.btnNormal {font-size:var(--sub-font-size); height:3.1em; font-weight:500}
.btnStrong {height:3.6em; font-size:1.1em; font-weight:500}
.btnBig {height:4em; font-size:1.2em; font-weight:700}
a.type1, .type1 {background:var(--key-color); color: #fff;}
a.type2, .type2 {background:#333333; color: #fff;}
a.type3, .type3 {background:#fff; color: #000; border:1px solid #000;}
a.type4, .type4 {background:#fff; color: #333; border:1px solid #cccccc;}
a.type5, .type5 {background:#fff; color:var(--key-color); border:1px solid var(--key-color);}



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

  }



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

@media screen and (max-width:479px){
  .btnNormal {font-size:13px}
	.bt_include .add_bt {width:auto}
	.bt_include .add_bt > a {width:max-content; padding:0px 1.5em}
}