@charset "utf-8";
/* ************ common vars ************ */
:root {
    --font-size-h2:2.6rem;
    --font-size-h3:2.2rem;
	--font-size-h4:1.8rem;
	--font-size-txtL:1.6rem;
    --font-size-txt:1.5rem;
    --font-size-txtS:1.3rem;
	--font-size-txtXS:1.2rem;
	--font-size-menu:1.8rem;
	--font-size-menusub:1.5rem;
    
    --colorGrayscale-L01:#F0F0F0;/* background */
    --colorGrayscale-L02:#D8D8D8;/* line */
    --colorGrayscale-L03:#C7C7C7;/* background */
    --colorGrayscale-D06:#aaa;
    --colorGrayscale-D05:#888;
    --colorGrayscale-D04:#666;
    --colorGrayscale-D03:#555;
    --colorGrayscale-D02:#333;
    --colorGrayscale-D01:#222;

    --color-red:#B21339;        --color-red-over:#880128;       --color-red-light:#FF95AE;
    --color-orange:#FE7817;     --color-orange-over:#CB6012;
    --color-blue:#0075FF;       --color-blue-over:#005AC4;
    --color-green:#2CC427;      --color-green-over:#199B15;
    --color-gray:#868E96;       --color-gray-over:#616972;
    --color-darkgray:#495057;   --color-darkgray-over:#151A23;
    --color-disable-bg:#989898; --color-disable-txt:#DFDFDF;
}

/* ************ reset ************ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, button, select {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { height: 101%; font-size: 62.5%; }
body { background: #fff; line-height: 1; color:var(--color-grayscale-D02); font-family: 'Noto Sans KR', 'SD Apple Gothic', sans-serif, 'Malgun Gothic', 'MalgunGothic', '맑은 고딕'; font-weight:400; letter-spacing: -0.05em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
fieldset, img, abbr, acronym{border:0} 
span, em, mark, strong, b, label{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent;list-style:none;box-sizing:border-box;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: 500; }
table { border-collapse: collapse; border-spacing: 0;border:0; }
td,th{word-break:break-all;margin:0;padding:0;box-sizing:border-box}
legend, caption{font-size:0;overflow:hidden;text-indent:-9999999px;height:0;width:0;line-height:0} 
img { border: 0; max-width: 100%; }
ins{text-decoration:none}
del{text-decoration:line-through}
sub, sup{margin:0;padding:0}   
em,i{font-style:normal}
a, a:link, a:visited, a:active,a:hover{text-decoration:none}
a, a::before, a::after, button, svg, label {transition:all 0.3s ease;}
input[type="button"], button{margin:0;padding:0;border:0;cursor:pointer;background:none} 
input[type="reset"], input[type="submit"]{line-height:normal;border:0} 
textarea{padding:1%;width:100%;border:1px solid #ccc;color:#4d4d4d;resize:none;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0} 
button:focus{}


/* ************ common ************ */ 
.align-r{text-align:right !important}
.align-c{text-align:center !important}
.align-l{text-align:left !important}
.float-l{float:left !important}
.float-r{float:right !important} 
.clearfix:after{content:"";display:block;clear:both;width:0;height:0}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;-moz-binding:url(/xe/ellipsis.xml#ellipsis)}
.w100{width:100%;display:block}
.hidden{overflow:hidden;width:0;height:0;line-height:0;margin:0;padding:0;font-size:0;text-indent:-9999px}
.break{display:block}/* pc에서는 줄바꿈,모바일에서는 줄바꿈이 없는경우 */
.break-inverse{display:inline} 
.p-type{display:block}
.m-type{display:none}
.ptNo {padding-top:0 !important;}
.hideTxt{display: none;}


/* ************ common objects ************ */
/* button */
[class*="btn_"]{display:inline-block; box-sizing: border-box; border-radius: 4px; vertical-align: bottom; text-align: center;}
[class*="btn_"]:focus{box-shadow: 0px 0px 6px 0px rgba(0,0,0,1);}
*:focus + label[class*="btn_"]{box-shadow: 0px 0px 6px 0px rgba(0,0,0,1);}
[class*="btn_s"]		{width: 80px; 	height: 28px; font-size: var(--font-size-txtS); font-weight: 400; line-height: 28px;}
[class*="btn_l"]		{width: 120px; 	height: 34px; font-size: var(--font-size-txt); font-weight: 600; line-height: 34px;}
[class*="btn_xl"]		{width: 185px; 	height: 50px; font-size: var(--font-size-txtL); font-weight: 600; line-height: 50px;}
[class*="btn_"].colOrange				{background: var(--color-orange); color: #fff;}
[class*="btn_"].colOrange:hover			{background: var(--color-orange-over);}
[class*="btn_"].colGreen				{background: var(--color-green); color: #fff;}
[class*="btn_"].colGreen:hover			{background: var(--color-green-over);}
[class*="btn_"].colBlue					{background: var(--color-blue); color: #fff;}
[class*="btn_"].colBlue:hover			{background: var(--color-blue-over);}
[class*="btn_"].colRed					{background: var(--color-red); color: #fff;}
[class*="btn_"].colRed:hover			{background: var(--color-red-over);}
[class*="btn_"].colGray					{background: var(--color-gray); color: #fff;}
[class*="btn_"].colGray:hover			{background: var(--color-gray-over);}
[class*="btn_"].colDarkGray				{background: var(--color-darkgray); color: #fff;}
[class*="btn_"].colDarkGray:hover		{background: var(--color-darkgray-over);}
[class*="btn_"].basic					{background: #fff; border: 1px solid var(--colorGrayscale-D05); color: var(--colorGrayscale-D01);}
[class*="btn_"].basic:hover				{background:var(--colorGrayscale-L01);}
[class*="btn_"][class*="col"].disable	{background: var(--colorGrayscale-D06); color: var(--colorGrayscale-L02);}
[class*="btn_"].basic.disable			{background: var(--colorGrayscale-L01); border-color:var(--colorGrayscale-L03); color: var(--colorGrayscale-D06);}
[class*="btn_"].wide					{width: auto; padding: 0 10px;}
.btn_xl.wide							{width: auto; padding: 0 25px;}

.btnSet{margin-bottom: 30px;display: flex; justify-content: space-between; align-items: center;}
.btnSet [class*="btn_"]{width: 100px;}
.btnSet .setL [class*="btn_"]{margin-right: 6px;}
.btnSet .setR [class*="btn_"]{margin-left: 6px;}

.btn_download { display: inline-flex; justify-content: center; align-items: center; width: 28px; height: 28px; background: var(--color-red); border-radius: 50%; }
.btn_download span { display: none;}
.btn_download:hover { background: var(--color-red-over); }
.btn_download svg.ic_download {width: 16px; height: 14px; fill: #fff;}

/* input - text, textarea, select */
input, textarea, select {display: block; box-sizing: border-box; width: 100%; height: 50px; padding: 0 10px; background: var(--colorGrayscale-L01); border: 1px solid var(--colorGrayscale-L01); border-radius: 4px; color: #212529; font-size: var(--font-size-txtS); font-weight: 400; transition:all 0.3s ease;}
input.xl, textarea.xl, select.xl {height: 34px; font-size: var(--font-size-txtS);}
input::placeholder, textarea::placeholder{color: var(--colorGrayscale-D06);}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: var(--colorGrayscale-D06);}
input:-ms-input-placeholder, textarea:-ms-input-placeholder{color: var(--colorGrayscale-D06);}
input:hover, textarea:hover, select:hover{border-color: var(--colorGrayscale-L03);}
input:focus, textarea:focus, select:focus{background: #fff; border-color: var(--color-red); box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);}
input:disabled, input:read-only, textarea:disabled, select:disabled{background: #fff; border-color: var(--color-red-light);}
textarea{height: 130px; padding: 10px; overflow-y: auto; line-height: 1.5em;}
textarea.xl{height: 130px; padding: 10px;}
select{-webkit-appearance: none; -moz-appearance: none; appearance: none; } select::-ms-expand {display: none;}
select[hidden]{display: none;}
select:not(:focus):invalid{color: var(--colorGrayscale-D06);}
.customSelect{position:relative; display: block;}
.customSelect::before, .customSelect::after{content:''; box-sizing: border-box; position:absolute; width: 7px; height: 7px; border: 2px solid var(--colorGrayscale-D05); border-width: 2px 2px 0 0; right: 14px;}
.customSelect::before{transform: rotate(-45deg); top: 50%; margin-top: -7px; }
.customSelect::after {transform: rotate(135deg); bottom: 50%; margin-bottom: -7px;}

/* input - check box, radio */
input[type="checkbox"], input[type="radio"] {display: block; width: 0px; height: 0px; transition:none;}
input[type="checkbox"] + label, input[type="radio"] + label {display: inline-block; color: var(--colorGrayscale-D02); font-size: var(--font-size-txtS); font-weight: 400;}
.st input[type="checkbox"] + label, .st input[type="radio"] + label {color: var(--colorGrayscale-D01); font-size: var(--font-size-txt); font-weight: 600;}
input[type="checkbox"] + label span, input[type="radio"] + label span {display: inline-block; width: 18px; height: 18px; margin-right: 4px; background: #fff; border: 2px solid var(--color-red-light); border-radius: 3px; vertical-align: -3px; transition:all 0.2s ease;}
input[type="checkbox"]:hover + label span, input[type="radio"]:hover + label span, 
input[type="checkbox"]:focus + label span, input[type="radio"]:focus + label span {border: 2px solid var(--color-red)}
input[type="checkbox"]:checked + label span, input[type="radio"]:checked + label span {position: relative; border: none; background: var(--color-red);}
input[type="checkbox"]:checked + label span:before {content: ''; position: absolute; top: 4px; left: 4px; width: 8px; height: 4px; border: 1px solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); transition:all 0.2s ease;}
input[type="radio"] + label span {border-radius: 9px; }
input[type="radio"]:checked + label span:before {content: ''; position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; background: #fff; border-radius: 3px; transition:all 0.2s ease;}

/* input - file */
.cellFile { display: flex; }
.cellFile input[type="text"] { flex-grow: 1; }
input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0 none; }
.cellFile > label, .cellFile > button { flex-shrink: 0;margin-left: 6px; }

/* ID Picture */
.IDpic{box-sizing: content-box; width: 100%; }
.IDpicCon{position:relative; width: 100%; height: 0; padding-bottom: 56.25%; background-size: cover; background-repeat: no-repeat; background-position: center;}
.IDpicCon .IDpicTarget{display: none;}

/* policy Box */
.policyGroup{box-sizing: border-box; padding: 30px 30px; border: 1px solid var(--colorGrayscale-L02); border-radius: 4px;}
.policy {box-sizing: border-box; width: 100%; height: 250px; padding: 15px; overflow-y: auto; line-height: 1.5em; background: var(--colorGrayscale-L01); border: 1px solid var(--colorGrayscale-L01); border-radius: 4px; color: var(--colorGrayscale-D05); font-size: var(--font-size-txtS); font-weight: 400;}
.policy h4 { color: var(--colorGrayscale-D02); font-size: var(--font-size-h4) !important;}
.policy h5 { margin: 20px 0 5px; color: var(--colorGrayscale-D03); font-size: var(--font-size-txt);}
.policy li {position: relative; padding-left: 15px;}
.policy li::before { position: absolute; left: 0; top: 0; }
.policy ul > li::before {content: '-';}
.policy > ol > li:nth-child(1):before { content: '①'; }
.policy > ol > li:nth-child(2):before { content: '②'; }
.policy > ol > li:nth-child(3):before { content: '③'; }
.policy > ol > li:nth-child(4):before { content: '④'; }
.policy > ol > li:nth-child(5):before { content: '⑤'; }
.policy > ol > li:nth-child(6):before { content: '⑥'; }
.policy > ol > li:nth-child(7):before { content: '⑦'; }
.policy > ol > li:nth-child(8):before { content: '⑧'; }
.policy > ol > li:nth-child(9):before { content: '⑨'; }
.policy > ol > li:nth-child(10):before { content: '⑩'; }
.policy > ol > li:nth-child(11):before { content: '⑪'; }
.policy > ol > li:nth-child(12):before { content: '⑫'; }
.policy > ol > li:nth-child(13):before { content: '⑬'; }
.policy > ol > li:nth-child(14):before { content: '⑭'; }
.policy > ol > li:nth-child(15):before { content: '⑮'; }
.policy > ol > li > ol li:nth-child(1)::before {content: '1.';}
.policy > ol > li > ol li:nth-child(2)::before {content: '2.';}
.policy > ol > li > ol li:nth-child(3)::before {content: '3.';}
.policy > ol > li > ol li:nth-child(4)::before {content: '4.';}
.policy > ol > li > ol li:nth-child(5)::before {content: '5.';}
.policy > ol > li > ol li:nth-child(6)::before {content: '6.';}
.policy > ol > li > ol li:nth-child(7)::before {content: '7.';}
.policy > ol > li > ol li:nth-child(8)::before {content: '8.';}
.policy > ol > li > ol li:nth-child(9)::before {content: '9.';}
.policy > ol > li > ol li:nth-child(10)::before {content: '10.';}
.policy > ol > li > ol li:nth-child(11)::before {content: '11.';}
.policy > ol > li > ol li:nth-child(12)::before {content: '12.';}
.policy > ol > li > ol li:nth-child(13)::before {content: '13.';}
.policy > ol > li > ol li:nth-child(14)::before {content: '14.';}
.policy > ol > li > ol li:nth-child(15)::before {content: '15.';}
.policy + .btnSet{margin: 15px 0 0;}
.btnSet + .policy {margin-top: 40px;}

/* title visual */
[class*="title_visual"]{width: 100%; margin-bottom: 60px; background-position: center; background-repeat: no-repeat; color: #fff;}
.title_visual {height: 125px; background-image: url('../images/bg_title.jpg'); background-size: cover; background-position: center 70%;}
.title_visual h2 {color: #fff; font-size: var(--font-size-h2); font-weight: 700; text-align: center; line-height: 125px;}
.title_visual_main {display: flex; justify-content: center; align-items: center; height: 500px; background-size: cover; }
.title_visual_main h2 { font-size: 5rem; font-weight: 900; }
.title_visual_main h2 svg {display: block; width: 105px; height: 79px; margin-bottom: 40px; fill: #fff; }
.title_visual_main p {margin-top: 20px; font-size: var(--font-size-h2); line-height: 1.2em; }
.title_visual_notext {height: 10px; background-image: url(../images/bg_footerline.jpg); background-size: 100% 100%;}
.title_visual_notext h2 {display: none;}

/* title sub */
h3 {position: relative; color: var(--color-red); font-size: var(--font-size-h2); font-weight:700;}
h3 small {display: inline-flex; align-items: center; margin-left: 10px; color: var(--colorGrayscale-D05); font-size: var(--font-size-txtS);}
h3 small svg {width: 13px; height: 13px; margin-right: 3px; fill: var(--colorGrayscale-D05);}
h3 a.more {position: absolute; right: 0; top: 0; padding: 5px 25px; border-bottom: 1px solid var(--colorGrayscale-D04); color: var(--colorGrayscale-D04); font-size: var(--font-size-txtXS); font-weight: 400; }
h3 a.more:after {content: ''; position: absolute; right: 7px; bottom: -3px; width: 1px; height: 20px; background-color: var(--colorGrayscale-D04); transform: rotate(-45deg); }
h3 a.more:hover {padding: 5px 40px 5px 10px;}

/* board - paging */
.paging{display: flex; justify-content: center; margin:50px 0 20px;}
.paging a{display: block; width: 35px; height: 35px; background: #fff; border: 1px solid var(--colorGrayscale-L03); border-left-width: 0; color: var(--colorGrayscale-D04); font-size: var(--font-size-txtS); text-align: center; line-height: 35px;}
.paging a:hover{background: var(--colorGrayscale-L01);}
.paging a.on{background-color: var(--color-red); border-color: var(--color-red); color: #fff; font-weight: 600;}
.paging a:first-of-type{border-left-width: 1px; border-radius: 5px 0 0 5px;}
.paging a:last-of-type{border-radius: 0 5px 5px 0;}
.paging [class*="nv_"]{position: relative; text-indent: -9999px;}
.paging [class*="nv_"]:after, .paging [class*="nv_"]:before{content: ''; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border: 2px solid var(--colorGrayscale-D04); border-width: 1px 1px 0 0; transform: rotate(45deg);}
.paging .nv_pv:before, .paging .nv_nx:before{display: none;}
.paging .nv_st:before{ left: 12px; transform: rotate(-135deg); }
.paging .nv_st:after { left: 16px;transform: rotate(-135deg); }
.paging .nv_pv:after { left: 16px; transform: rotate(-135deg); }
.paging .nv_nx:after { left: 12px; }
.paging .nv_ed:before{ left: 8px; }
.paging .nv_ed:after { left: 12px; }

/* section - tab */
section.tab{}
section.tab ul{display: flex;}
section.tab ul li{flex:1;}
section.tab ul li a{display: block; width: 100%; height: 60px; border: 1px solid var(--colorGrayscale-L02); color: var(--colorGrayscale-D02); font-size: var(--font-size-txtS); line-height: 60px; text-align: center;}
section.tab ul li + li a{border-left: none;}
section.tab ul li a:hover{background-color: var(--colorGrayscale-L01);}
section.tab ul li.on a{background-color: var(--color-red); border-color: var(--color-red); color: #fff; font-weight: 700;}

/* section - btnset */
section.btnSetC {margin-top: 40px; border:none; text-align: center;}
section.btnSetC [class*="btn_"]{margin: 0 3px;}

/* section - vod list */
section.listVod {}
section.listVod ul {display: flex; flex-wrap: wrap; justify-content: start; }
section.listVod ul li {width: 290px; min-height: 270px; margin-bottom: 15px; margin-right: calc( 40px / 3 ); padding: 10px; background-color: #fff; box-shadow: 0px 3px 20px 0px rgba(0,0,0,.1); transition:all 0.4s ease;}
section.listVod ul li:nth-child(4n) {margin-right: 0;}
section.listVod ul li:hover {box-shadow: 0px 3px 20px 0px rgba(0,0,0,.4);}
section.listVod ul li .liTitle {margin:13px 0; color: var(--colorGrayscale-D01); font-size: var(--font-size-h4); font-weight: 700;}
section.listVod ul li p {display: block; color: var(--colorGrayscale-D04); font-size: var(--font-size-txtS); overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;-moz-binding:url(/xe/ellipsis.xml#ellipsis)}
section.listVod ul li button {width: 100%; margin-top: 20px;}

/* section - searchBox */
section.searchBox {display: flex; justify-content: center; box-sizing: border-box; margin-bottom: 50px; padding: 15px 280px; border: 1px solid var(--colorGrayscale-L02); border-radius: 4px;}
section.searchBox > * + * {margin-left: 6px;}
section.searchBox > input[type="text"] {width: auto; flex: 1;}
section.searchBox select {width: auto; min-width: 140px;}
section.searchBox button {display: flex; align-items: center;}
section.searchBox button svg.ic_search { width: 19px; height: 19px; margin-right: 5px; fill: #fff;}

/* section - complete */
section.complete {display: flex; justify-content: center; box-sizing: border-box; padding: 25px 200px; border: 1px solid var(--colorGrayscale-L02); border-radius: 4px;}
section.complete ul {width: 100%;}
section.complete li {border-bottom: 1px solid var(--colorGrayscale-L03);}
section.complete li:last-of-type {border-bottom: none;}
section.complete li dl {display: flex; align-items: center; justify-content:space-between; padding: 15px; }
section.complete li dl dt, section.complete li dl dd { width: 49%; }
section.complete li dl dt { color: var(--colorGrayscale-D02); font-size: var(--font-size-txt); text-align: right;}
section.complete li dl dd { color: var(--colorGrayscale-D01); font-size: var(--font-size-txtL); text-align: left; font-weight: 700;}

/* section - error */
section.error {box-sizing: border-box; margin: 80px 200px 40px; padding: 25px 0 50px; border: 1px solid var(--colorGrayscale-L02); border-radius: 4px;}
section.error h4 {display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--colorGrayscale-L02); font-size: 100px; font-weight: 900; }
section.error h4 small {display: block; margin-top: 15px; color: var(--colorGrayscale-D02); font-size: var(--font-size-h2); font-weight: 600;}
section.error p {display: flex; justify-content: center; align-items: center; margin-top: 30px;}
section.error p span {display: flex; flex-direction: column; justify-content: center; align-items:flex-start; color: var(--colorGrayscale-D02); font-size: var(--font-size-txtL); font-weight: 400; line-height: 1.5em; }
section.error p span strong {display: block; color: var(--color-orange); font-weight: 800; }
section.error p svg.ic_exclamM {width:47px; height: 47px; margin-right: 10px; fill: var(--color-orange);}

/* section - main list */
section.mainlist {padding: 20px; background-color: #fff; box-shadow: 0px 3px 20px 0px rgba(0,0,0,.1);}
section.mainlist li {display: flex; align-items: center; padding: 10px 0;}
section.mainlist li a {flex: 1; color: var(--colorGrayscale-D02); font-size: var(--font-size-txt); overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;-moz-binding:url(/xe/ellipsis.xml#ellipsis)}
section.mainlist li a:hover {color: var(--color-red-light);}
section.mainlist li i {margin-left: 5px;}


/* ************ layout ************ */
html, body{height: 100%;}
.wrap{display:table;width:100%; height: 100%; margin: 0;}
header, footer{position:relative; display: table-row; width: 100%; height: 1px; background: #fff;}
main{position:relative; display: table-row; width: 100%; height: 100%; background: #fff;}
main.intPG{background: var(--colorGrayscale-L01);}
.header_wrap, .footer_wrap {width: 1200px; margin: 0 auto;}

/* 헤더영역 */
header {text-align: center;}
header .header_wrap {position: relative; display: flex; align-items: center; justify-content: center; height: 90px;}
header h1{position: absolute; left: 0; top: 0; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; }
header h1 a{display: block; width: 100%; height: 100%;}
header h1 span{display: none;}
header nav{}
header nav > ul{display: flex;}
header nav > ul > li{position: relative;}
header nav > ul > li+li{margin-left: 30px;}
header nav > ul > li > a{position: relative; display: block; height: 60px; padding: 0 30px; color: var(--colorGrayscale-D02); font-size: var(--font-size-menu); font-weight: 700; line-height: 60px;}
header nav > ul > li > a:hover{color: #000;}
header nav > ul > li > a::before{content: ''; position: absolute; left: 50%; bottom: 0; width: 0%; height: 2px; background: var(--colorGrayscale-D06); }
header nav > ul > li > a:hover::before{left: 0; width: 100%;}
header nav > ul > li.on > a{color: var(--color-red);}
header nav > ul > li.on > a::before{left: 0; width: 100%; height: 5px; background: var(--color-red); }

header nav > ul > li ul{visibility: hidden; opacity: 0; position: absolute; width: 100%; padding: 10px 0; background-color: #fff; box-shadow: 0px 3px 20px 0px rgba(0,0,0,.2); transition:all 0.5s ease; border-radius: 4px;}
header nav > ul > li:hover ul{visibility: visible; opacity: 1;}
header nav > ul > li ul li{width: 100%;}
header nav > ul > li ul li + li{border-top:1px solid var(--colorGrayscale-L01);}
header nav > ul > li ul li a{display: block; width: 100%; padding: 10px 0; background-color: #fff; color: var(--colorGrayscale-D04); font-size: var(--font-size-menusub);}
header nav > ul > li ul li a:hover{background-color: var(--colorGrayscale-L01); color: #000;}

header .gnb{position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center;}
header .gnb a{color: var(--colorGrayscale-D04); font-size: var(--font-size-txtS); font-weight: 300;}
header .gnb a svg{width: 12.5px; height: 14px; fill: var(--colorGrayscale-D04); margin-right: 5px;}
header .gnb a:hover{text-decoration: underline;}

/* main */
main{}
article{width: 1200px; margin: 30px auto 120px;}
article .multisection{ display: flex; justify-content: space-between; align-items: flex-start; margin-top: 40px; }
article .multisection > *{ width: 49.5%; }
section {margin-top: 20px;}
section + h3{margin-top: 20px;}

/* footer */
footer{}
footer::before{content: ''; display: block; width: 100%; height: 10px; background-image: url(../images/bg_footerline.jpg); background-size: 100% 100%;}
footer .footer_wrap{height: 100px;}
footer address{margin-top:20px; color: var(--colorGrayscale-D06); font-size: var(--font-size-txtXS); line-height: 1.6em; text-align: center;}



/* ************ form group align ************ */
/* form common */
section.formGroup{box-sizing: border-box; padding: 40px 30px; border: 1px solid var(--colorGrayscale-L02); border-radius: 4px;}
[class*="form"] mark{padding-left: 5px; color: var(--color-orange);}
[class*="form"] .noti{margin-top:4px; color: var(--colorGrayscale-D05); font-size: var(--font-size-txtS); font-weight: 400; line-height: 1.3em;}
/* form h4 */
.formGroup h4{margin:30px 0 5px; color: var(--colorGrayscale-D02); font-size: var(--font-size-txtL); font-weight: 600; line-height: 1.3em;}
.formGroup h4 small{padding-left: 5px; color: var(--colorGrayscale-D05); font-size: var(--font-size-txtS); font-weight: 400;}
.formGroup h4:first-of-type{margin-top: 0;}
/* form row */
.formGroup .formRow{position: relative; display: flex; justify-content: space-between; }
.formGroup .formRow + .formRow {margin-top: 10px;}
/* form cell */
.formGroup .formCell {flex: 1; color:var(--colorGrayscale-D02); font-size: 1.3rem; font-weight: 400;}
.formGroup .formCell + .formCell{margin-left: 6px;}
.formGroup .formCell h5{height:1.8rem; color: var(--colorGrayscale-D02); font-size: var(--font-size-txtS); font-weight: 400;}
/* cellunit - chkbox */
.cellChkbox{display: inline-block; height: 34px; margin-left: 5px; line-height: 34px;}
.cellChkbox + .cellChkbox{margin-left: 25px;}


/* ************ board ************ */
.board{}
/* board - table list */
.board table{position:relative; width: 100%; margin-bottom: 20px; border-collapse:separate; border-top:2px solid var(--colorGrayscale-D02);table-layout: fixed;}
.board table:after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--colorGrayscale-D02); }
.board table td, .board table th{position:relative; padding: 10px 20px; vertical-align: middle; border-bottom: 1px solid var(--colorGrayscale-L02); color: var(--colorGrayscale-D04); font-size: var(--font-size-txtS); text-align: center;}
.board table th{padding: 15px 20px; background: var(--colorGrayscale-L01); color: var(--colorGrayscale-D02); font-size: var(--font-size-txt); text-align: center; }
.board table thead tr:last-child th{border-bottom: none;}
.board table td.alignL{text-align: left; }
.board table td.alignR{text-align: right; }
.board table td.alignC{text-align: center;}
.board table td a{display:block;color: var(--colorGrayscale-D02); font-size: var(--font-size-txt); overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.board table td a:hover{text-decoration: underline;}

/* board - table view */
section.board table .viewTitle{ padding: 20px; font-size: var(--font-size-h4); font-weight: 400; line-height: 1.3em; text-align: left; word-break: keep-all;}
section.board table .viewTitle span.date{ display: block; margin-top: 8px; color: var(--colorGrayscale-D04); font-size: var(--font-size-txtXS); font-weight: 300;}
section.board table .viewTitle span.date span:after{content: ''; display: inline-block; width: 1px; height: 10px; background: var(--colorGrayscale-D06); margin: 0 10px; vertical-align: -1px; }
section.board table .viewTitle span.date span:last-child:after{display: none;}

section.board table .viewContents{padding: 20px 0 50px; text-align: left;}
section.board table .viewContents *{line-height: 1.3em;}
section.board table .viewContents img{display:block; width: auto !important; max-width: 100% !important; margin: 10px auto;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    section.board table .viewContents img{max-width: 980px !important;}
}
section.board table .viewContents .file {margin-bottom:50px; padding:0 30px 20px; border-bottom:1px solid var(--colorGrayscale-L02)}
section.board table .viewContents .file strong{display:block; margin-bottom: 10px; font-size: var(--font-size-txt);}
section.board table .viewContents .file a{display:inline-block; margin:0 5px 2px 0; padding: 3px 20px; border-radius: 20px; background: var(--color-red); color: #fff; font-size: var(--font-size-txtS); line-height: 1.3em;}
section.board table .viewContents .file a:hover{background: var(--color-red-over); text-decoration: none;}
section.board table .viewContents .cont{padding: 0 30px;}


/* ************ faq ************ */
.faq{}
.faq ul {position:relative; border-top:2px solid var(--colorGrayscale-D02);}
.faq ul:after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--colorGrayscale-D02); }
.faq ul li{border-bottom:1px solid var(--colorGrayscale-L02);}
.faq ul li dt, .faq ul li dd { position: relative; padding: 20px 20px 20px 70px; color: var(--colorGrayscale-D04); font-size: var(--font-size-txt); line-height: 1.5em; }
.faq ul li dt { cursor: pointer; color: var(--colorGrayscale-D02); font-size: var(--font-size-txtL); font-weight: 400; }
.faq ul li dd { display: none; background-color: var(--colorGrayscale-L01); font-weight: 400; }
.faq ul li dl em { position: absolute; left: 20px; top: 17px; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: var(--font-size-h4); font-weight: 900; display: flex; justify-content: center; align-items: center; }
.faq ul li dl dt em { background-color: var(--color-red); }
.faq ul li dl dd em { background-color: var(--color-gray); }
.faq ul li dl i {position: absolute; right: 25px; top: 25px; width: 10px; height: 10px; border: 2px solid var(--colorGrayscale-D04); border-width: 0 2px 2px 0; transform: rotate(45deg);}

.faq ul li.on dl i {transform: rotate(-135deg);}
.faq ul li.on dt { font-weight: 700; }
/*.faq ul li.on dd { display: block; }*/

/* ************ objects ************ */
/* message notice */
.msg_noti{display: flex; align-items: center; justify-content: center; padding: 20px 0; color: var(--color-orange); font-size: var(--font-size-txtL); font-weight: 700; }
.msg_noti svg.ic_exclamM{width: 24px; height: 22px; margin-right: 5px; fill: var(--color-orange);}



/* ************ modal ************ */
.modal{position: fixed;z-index: 10;left: 0;top: 0;display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;overflow: auto;background-color: rgba(0,0,0,.6); visibility: hidden; opacity: 0; transition:all 0.2s ease;}
.modal.on{visibility: visible; opacity: 1;}
.modal .modal_con{position: relative; display: flex; flex-direction: column; width: 800px; height: 800px; background: #fff; box-shadow: 0px 10px 30px rgba(0,0,0,.3); }
.modal .modal_con [class*="md_"]{padding: 0 20px;}
.modal .modal_con .md_hd{ height: 70px; border-bottom: 1px solid var(--colorGrayscale-L03); }
.modal .modal_con .md_con{ flex: 1; padding: 40px; overflow: auto; color: var(--colorGrayscale-D03); font-size: var(--font-size-txt); line-height: 1.5em;}
.modal .modal_con .md_con section{margin-bottom: 20px; }
.modal .modal_con .md_ft{display: flex; align-items: center; height: 80px; border-top: 1px solid var(--colorGrayscale-L03);}
.modal .modal_con .md_ft .btnSet{width: 100%; margin:0}

/* ************ popup ************ */
.popupnoti {position: relative; display: flex; flex-direction: column; width: 800px; height: 800px; background: #fff; box-shadow: 0px 10px 30px rgba(0,0,0,.3); }
.popupnoti [class*="md_"]{padding: 0 20px;}
.popupnoti .md_hd{ height: 70px; border-bottom: 1px solid var(--colorGrayscale-L03); }
.popupnoti .md_con{ flex: 1; padding: 40px; overflow: auto; color: var(--colorGrayscale-D03); font-size: var(--font-size-txt); line-height: 1.5em;}
.popupnoti .md_con section{margin-bottom: 20px; }
.popupnoti .md_ft{display: flex; align-items: center; height: 80px; border-top: 1px solid var(--colorGrayscale-L03);}
.popupnoti .md_ft .btnSet{width: 100%; margin:0}

/* modal header */
.md_hd h2 {color: var(--colorGrayscale-D01); font-size: var(--font-size-h3); font-weight: 600; line-height: 70px; text-align: center;}
.md_hd .md_hd_btns {position: absolute; right: 10px; top: 15px; padding: 0 !important;}
.md_hd .md_hd_btns > a { position: relative; width: 40px; height: 40px; float: left;}
.md_hd a > span{display: none;}
.md_hd a.close::before{content: ''; position: absolute; left: 50%; top: 50%; margin-left: -9px; width: 20px; height: 2px; background: var(--colorGrayscale-D04); transform: rotate(45deg); transition:all 0.2s ease;}
.md_hd a.close::after {content: ''; position: absolute; left: 50%; top: 50%; margin-top: -9px; width: 2px; height: 20px; background: var(--colorGrayscale-D04); transform: rotate(45deg); transition:all 0.2s ease;}
.md_hd a.close:hover::before{background: var(--color-orange);}
.md_hd a.close:hover::after{background: var(--color-orange);}

/* modalpage - video */
.modal.video{}
/*.modal.video .modal_con{width: 1200px; height: 852px; overflow: visible; background: #fff; box-shadow: 0px 10px 30px rgba(0,0,0,.3); }*/
.modal.video .modal_con{overflow: visible; background: #fff; box-shadow: 0px 10px 30px rgba(0,0,0,.3); }
.modal.video .modal_con .md_con{ padding: 30px; background-color: var(--colorGrayscale-D02);}
.modal.video .movie_container{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
/*.modal.video .movie_container iframe{position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important;}*/


/* ************ loading ************ */
#link {color: #E45635;display:block;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:center; text-decoration: none;}
#link:hover {color: #CCCCCC}

#link, #link:hover {-webkit-transition: color 0.5s ease-out;-moz-transition: color 0.5s ease-out;-ms-transition: color 0.5s ease-out;-o-transition: color 0.5s ease-out;transition: color 0.5s ease-out;}

/** BEGIN CSS **/
body {background: #333333;}
@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

.loading-wrap {position: fixed;z-index: 10;left: 0;top: 0;display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;overflow: auto;background-color: rgba(0,0,0,0.8); visibility: hidden; opacity: 0; transition:all 0.2s ease; }
.loading-wrap.on{visibility: visible; opacity: 1; line-height: 1.2em;}

.loading-container,
.loading {
    height: 100px;
    position: relative;
    width: 100px;
    border-radius: 100%;
}

.loading-container {  }

.loading {
    border: 2px solid transparent;
    border-color: transparent #fff transparent #FFF;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading {
    border-color: transparent #E45635 transparent #E45635;
}
.loading-container:hover .loading,
.loading-container .loading {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#loading-text {
    -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
    -o-animation: loading-text-opacity 2s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
    animation: loading-text-opacity 2s linear 0s infinite normal;
    color: #ffffff;
    font-family: "Helvetica Neue, "Helvetica", ""arial";
    font-size: 10px;
    font-weight: bold;
    margin-top: 45px;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 100px;
}

/* Validation */
label.error {
  color: #cc5965;
  display: inline-block;
  margin-left: 5px;
  margin-top:5px;
}
.form-control.error {
  border: 1px dotted #cc5965;
}