@charset "utf-8";

/*webfont*/

@font-face {
    font-family: 'NanumGothic';
    font-style: normal;
    font-weight: 400;
    src: url('//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2') format('woff2'), 
        url('//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff') format('woff'),
        url('../fonts/NanumGothic/NanumGothicR.ttf') format('truetype');
}

@font-face {
    font-family: 'NanumGothic';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/NanumGothic/NanumGothicB.woff2') format('woff2'), 
        url('../fonts/NanumGothic/NanumGothicB.woff') format('woff'),
        url('../fonts/NanumGothic/NanumGothicB.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/NotoKR/NotoSansKR-Regular.woff2') format('woff2'),
         url('../fonts/NotoKR/NotoSansKR-Regular.woff') format('woff'),
         url('../fonts/NotoKR/NotoSansKR-Regular.otf') format('opentype') ;
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/NotoKR/notokr-medium.woff2') format('woff2'),
         url('../fonts/NotoKR/notokr-medium.woff') format('woff'),
         url('../fonts/NotoKR/notokr-medium.ttf') format('truetype') ;
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/NotoKR/notokr-bold.woff2') format('woff2'),
         url('../fonts/NotoKR/notokr-bold.woff') format('woff'),
         url('../fonts/NotoKR/notokr-bold.ttf') format('truetype');
} 


@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 800;
    font-style: normal;
    src: url('../fonts/NotoKR/notokr-black.woff2') format('woff2'),
         url('../fonts/NotoKR/notokr-black.woff') format('woff'),
         url('../fonts/NotoKR/notokr-black.ttf') format('truetype');
} 



/*html5용*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
 
* {margin:0px; padding:0px;box-sizing:border-box}
html{min-height:100%;font-size:62.5%;}
body{min-height:100%; font-size:1.6rem;}
html,body {-webkit-overflow-scrolling: touch}
@media all and (max-width:1279px){  
    html{
        font-size:60%;
    }
}
@media all and (max-width:480px){  
    html{
        font-size:56.25%;
    }
}

body{color:#222222; ;
font-family:'Noto Sans KR', 'Apple SD Gothic Neo','NanumGothic','Malgun Gothic','맑은 고딕', Sans-serif,Helvetica; line-height:1.5; font-weight:400; -webkit-text-size-adjust: none;}

a {text-decoration:none; color:inherit; }
textarea {width:100%; display:block; resize:none; height:80px; padding:5px 0 0 8px; box-sizing:border-box; border:1px solid #a3abbe; font-family:inherit; font-size:inherit; background-color:#fff; -webkit-appearance: unset; border-radius:0; overflow-y:auto}

/* hidden */
legend, .hidden {position:absolute; left:0; top:0; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden;}
caption {width:0; height:0; font-size:0; line-height:0; overflow:hidden; text-indent:-9999px}
/*caption을 position으로 숨기면 사파리에서 caption이 깨져 보이는 경우가 있어 position을 제외하고 숨김.*/

h1, h2, h3, h4, h5, h6, input, select, textarea, button {font-size:inherit; font-weight:inherit;}
table{border-collapse:collapse; border-spacing:0; width:100%}
img, fieldset {border:none;}
img, input, a, button, label{vertical-align:middle;}
ins {text-decoration: none;}
del {text-decoration: line-through;}

.time {color:#222222; font-size:12px; }
 
/* 목록 및 인용 */
ol, ul, dl,  li {list-style: none; }
blockquote, q { quotes: none; }

 
input{
box-sizing:border-box;
vertical-align:middle;
text-indent:7px;
font-size:inherit;
font-family:inherit;
border:1px solid #a3abbe;
color:#555;
border-radius:0; background-color:#fff;
}

input,button,select {
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input:focus {
    /*outline: 1px dotted #000*/
}

button {
    border: 0;
    background: none;
    cursor: pointer; /*outline:none;*/
    font-family:inherit;
}


button:disabled {
    cursor: default
}

/* 영문 설정 */
.lang-en, :lang(en) { font: 12px/1.5 "Helvetica Neue", Helvetica, Verdana, Arial, Sans-Serief; }
 

 
/* :active, :focus 가상클래스 아웃라인 설정 제거 
:active, :focus {outline: 0;}
 */
div, p, a, span, ul, li, button, section, aside, footer {word-wrap:break-word; word-break:keep-all; box-sizing:border-box;}



/* 텍스트를 선택했을때 bg컬러 및 폰트 컬러 변경 
::selection {background-color:#eee7dd; color:#666;}
::-moz-selection {background-color:#eee7dd; color:#666;}*/
 
 
/* input */
input[type=text]::-ms-clear {display: none;}  /*input의 x 버튼 제거 for IE */
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number] {
    border:1px solid #aaaaaa; color:#444444; height:4rem; box-sizing:border-box; 
    padding:0 10px; text-indent:0; min-width:150px; border-radius:5px;}
input[type=text][readonly], input[type=password][readonly], input[type=email][readonly], input[type=tel][readonly] , input[type=number][readonly] {background:#f6f6f6; color:#777}

/* label + input {margin-left:15px} */
input.no-border[type=text][readonly], input.no-border[type=password][readonly], input.no-border[type=email][readonly], input.no-border[type=tel][readonly], input.no-border[type=number][readonly] {background:transparent; color:#444; border:0; outline: 0;}


@media all and (max-width:1279px){  
    .mobile input{font-size:1.4rem}
}

@media all and (max-width:1023px){  
    /*.mobile label + input {margin-left:10px}*/
}


/*input type="number" 기본 스타일 제거 */
input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}


/*checkbox*/
input[type="checkbox"] {width:19px; height:19px; border:1px solid #57585a;outline:0 }
input[type="checkbox"]:disabled {background:#eee; border:1px solid #aaa}
input[type="checkbox"]:disabled:checked  {background-image:url(../images/chk_disable.png);}
input[type="checkbox"]:checked {background-image:url(../images/chk_normal.png); background-repeat:no-repeat; background-position:center; background-size:18px auto}
input[type="checkbox"] + label {padding-left:10px !important; }
input[type="checkbox"] + span {vertical-align:middle}

@media all and (max-width:1023px){  
    input[type="checkbox"] {width:13px; height:13px;  }
    input[type="checkbox"]:checked {background-size:11px auto}
}

/*radio*/
input[type="radio"] {width:19px; height:19px; border:1px solid #57585a; border-radius: 50%; outline:0 }
input[type="radio"]:disabled {background:#eee; border:1px solid #aaa}
input[type="radio"]:disabled:checked  {background-image:url(../images/rdo_disable.png);}
input[type="radio"]:checked {background-image:url(../images/rdo_normal.png); background-repeat:no-repeat; background-position:center; background-size:9px auto}
input[type="radio"] + label {padding-left:7px !important; }
input[type="radio"] + label + input[type="radio"] {margin-left:10px}
input[type="radio"] + span {vertical-align:middle}
.rdo-group {margin-right:10px; display:inline-block;} 
@media all and (max-width:320px){      
    .rdo-group {display:block;} 
}

/*checkmarkRadio*/
input[type="radio"].checkmarkRadio {border-radius:0}
input[type="radio"].checkmarkRadio:disabled:checked  {background-image:url(../images/chk_disable.png);}
input[type="radio"].checkmarkRadio:checked {background-image:url(../images/chk_normal.png); background-repeat:no-repeat; background-position:center; background-size:18px auto}



@media all and (max-width:1023px){  
    .mobile input[type="radio"] {width:13px; height:13px;  }
    .mobile input[type="radio"]:checked {background-size:5px auto}
}

/* spin */
.spin-box {width:105px; position:relative; display:inline-block;}
.spin-box input {width:100%;}
.spin-box .spin-up, .spin-box .spin-down {width:25px; height:14px; background:#ccc; position:absolute; right:0; text-indent:-9999px; overflow:hidden; background:url("../images/icons/select_drop.png") no-repeat center}
.spin-box .spin-up { top:0; transform:rotate(180deg); background-position:center top 3px; }
.spin-box .spin-down {bottom:0; background-position:center top 3px;}

/* calendar */
.calendar-box {width:150px; position:relative; display:inline-block; line-height:0}
.calendar-box input {width:100%;}
.calendar-box .btn-cal-open {width:30px; height:100%; position:absolute; right:0; top:0; text-indent:-9999px; 
    overflow:hidden; background:url("../images/icons/ico_cal.png") no-repeat center}

@media all and (max-width:1279px){  
    .calendar-box {width:140px;}
    .calendar-box .btn-cal-open {width:38px; }
}

@media all and (max-width:1023px){ 
    .cal-period-wrap {display:flex !important; justify-content: center;} 
    .cal-period-wrap .calendar-box:first-child {margin-right:5px;}
    .cal-period-wrap .calendar-box:last-child {margin-left:5px;}
    .calendar-box {width:48%;/* max-width:135px;*/}
    .calendar-box .btn-cal-open {width:28px; background-size:16px auto}
}

/* select */
select::-ms-expand {display: none; } /* select의 드랍버튼(화살표) 제거 for IE11 */
select {border:1px solid #aaaaaa; color:#222;
     height:4rem; padding:0 10px; padding-right:28px; 
     background:#fff url("../images/icons/select_drop.png") no-repeat right 9px center;
     vertical-align:middle;font-family:inherit}

/* Button */
.btn {height:4rem; line-height:4rem; padding:0 10px; 
    border:1px solid #222; color:#222; 
    display:inline-block; background:#fff; 
    font-family:inherit;color:#444; font-size:1.5rem; font-weight:500;
    vertical-align:middle; text-align:center}
.btn.black {background:#222; color:#fff; border:1px solid #222}
.btn.blue {background:#2946f3; border:1px solid #2946f3; color:#fff}
.btn.darkBlue {background:#276eb2; border:1px solid #276eb2; color:#fff}
/* .btn.red {background:#c32662; color:#fff; border:1px solid #c32662} */
.btn.red {background:#d22121; color:#fff; border:1px solid #d22121}
.btn.green {background:#40a51d; color:#fff; border:1px solid #40a51d}
.btn.darkGray {background:#444; color:#fff; border:1px solid #444}
.btn.gray {background:#bbbbbb; color:#fff; border:1px solid #bbbbbb}

.btn.wblue{border:1px solid #3e82c3; color:#3e82c3}

.btn.pur{border:1px solid #4c25b1; color:white; background:#4c25b1;}
.btn.wpur{border:1px solid white; color:#3d16a3;}
.btn.yellow{background:#fae100; color:#222; border:1px solid #fae100;}
input.btn {text-indent:0; cursor:pointer}

.btn.large{height:4rem; line-height:4rem; font-size:1.5rem;}
.btn.round{border-radius:3px;}

@media all and (max-width:1279px){  
    .mobile select{font-size:1.4rem}
    .mobile .btn {height:3.5rem; line-height:3.5rem; font-size:1.4rem;}
}


/*크롬브라우저에서 자동완성 기능이 작동할 때 input의 배경색이 변하는 현상 제거 
input:-webkit-autofill
{
   -webkit-box-shadow: 0 0 0 100px #fff inset;
   -moz-box-shadow: 0 0 0 100px #fff inset;
   box-shadow: 0 0 0 100px #fff inset;
}*/

/* 스크롤바 custom */
/* ie */
.nav-area {
   scrollbar-face-color: #6e6e6e;
   scrollbar-track-color: #030b1c;
   scrollbar-arrow-color: #6e6e6e;
   scrollbar-highlight-color: #6e6e6e;
   scrollbar-3dlight-color: none;
   scrollbar-shadow-color: #030b1c;
   scrollbar-darkshadow-color: #030b1c;
 }
  

/*웹킷 기본 스타일 덮어쓰기*/
input[type="search"] {-webkit-appearance:textfield; box-sizing:content-box;}
 
input:-ms-input-placeholder{color:#999;}
input::-moz-input-placeholder{color:#999;}
input::-webkit-input-placeholder {color:#999;}
input::placeholder {color:#999;}

/*clear*/
.clear:after {content:" "; display:block; height:0; clear:both; visibility:hidden;}

/*정렬클래스*/
.al {text-align:left !important;}
.ar {text-align:right !important;}
.ac {text-align:center !important;}


/*폰트칼라*/
.fc-blue {color:#061055 !important;}
.fc-orange {color:#d98000 !important;}
.fc-red {color:#ed2024 !important;}
.fc-gray {color:#bbb !important;}

.fw500{font-weight:500}
.fwb {font-weight:600 !important;}

/*폰트칼라*/
.mobile .overflow-hidden-mobile {overflow:hidden !important;}


/*마진,패딩 클래스*/
.c-mt5{margin-top:0.5rem}
.c-mt10{margin-top:1rem}
.c-mt20{margin-top:2rem}
.c-mt30{margin-top:3rem}
.mt0 {margin-top:0 !important;}
.mt05{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;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}


.mb0{margin-bottom:0px !important;}
.mb05{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}


.ml0 {margin-left:0 !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}
.ml30{margin-left:30px !important;}
.ml35{margin-left:35px !important;}
.ml40{margin-left:40px !important;}
.ml45{margin-left:45px !important;}
.ml50{margin-left:50px !important;}
.ml100{margin-left:50px !important;}

.mr0 {margin-right:0 !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mr35{margin-right:35px !important;}
.mr40{margin-right:40px !important;}
.mr45{margin-right:45px !important;}
.mr50{margin-right:50px !important;}


.pt0 {padding-top:0 !important;}
.pt05{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pt25{padding-top:25px !important;}
.pt30{padding-top:30px !important;}
.pt35{padding-top:35px !important;}
.pt40{padding-top:40px !important;}
.pt45{padding-top:45px !important;}
.pt50{padding-top:50px !important;}

.pb0 {padding-bottom:0 !important;}
.pb05{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}
.pb15{padding-bottom:15px !important;}
.pb20{padding-bottom:20px !important;}
.pb25{padding-bottom:25px !important;}
.pb30{padding-bottom:30px !important;}
.pb33{padding-bottom:33px !important;}
.pb35{padding-bottom:35px !important;}
.pb40{padding-bottom:40px !important;}
.pb45{padding-bottom:45px !important;}
.pb50{padding-bottom:50px !important;}

.pl0 {padding-left:0 !important;}
.pl5 {padding-left:5px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pl20{padding-left:20px !important;}
.pl25{padding-left:25px !important;}
.pl30{padding-left:30px !important;}
.pl35{padding-left:35px !important;}
.pl40{padding-left:40px !important;}
.pl45{padding-left:45px !important;}
.pl50{padding-left:50px !important;}


.pr0 {padding-right:0 !important;}
.pr5 {padding-right:5px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}
.pr25{padding-right:25px !important;}
.pr30{padding-right:30px !important;}
.pr35{padding-right:35px !important;}
.pr40{padding-right:40px !important;}
.pr45{padding-right:45px !important;}
.pr50{padding-right:50px !important;}

/* 넓이 */
.c-wp100{width:100%}

.txt-link {text-decoration: underline; vertical-align:baseline}
.fl {float:left;}
.fr {float:right;}


/* :active, :focus 가상클래스 아웃라인 설정 제거 */
:focus {outline: 0;}

.c-checkboxGroup{}
.c-checkboxGroup label{
    display:inline-block;
    position:relative;
    padding-left:28px;
    cursor:pointer;
}
    .c-checkboxGroup label.disabled{
        cursor:default;
    }
    .c-checkboxGroup .noLabel{
        width:1.8rem;
        padding:0;
    }
        .c-checkboxGroup .noLabel:before{
            content:'check';
            display:inline-block;
            width:0; height:0;
            font-size:0;
            opacity:0;
        }
        
.c-checkboxGroup input[type="radio"], .c-checkboxGroup input[type="checkbox"]{
    position:absolute;
    height:0;
    width:0;
    opacity:0;
}
.c-checkboxGroup__checkmark, .c-checkboxGroup__radiomark{
    position:absolute; top:50%; transform:translate(0, -40%); /*transform:translate(0, -50%);*/
    left:0;
}
.c-checkboxGroup__checkmark{
    width:2rem;height:2rem; margin-top:1px;
    background-color:#fff;
    border:1px solid #ddd; border-radius:100%;
}
.c-checkboxGroup__checkmark:after{
    display:block;
    content:"";
    /*width:3px;
    height:8px;*/
    width:7px;
    height:9px;
    border:solid #ccc;
    border-width: 0 2px 2px 0;
    position:absolute;
    top:45%;
    left:50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}
.c-checkboxGroup__radiomark{
    width:18px;
    height:18px;
    border:1px solid #707070;
    border-radius:200%;
    /* display:inline-block;
    width:1.8rem; height:1.8rem;
    background:url("/resources/images/icons/ico_radio_off.svg") no-repeat center center; */
}

input:focus ~.c-checkboxGroup__checkmark{
    outline:1px solid #ddd;
}
input:checked ~ .c-checkboxGroup__checkmark{
    /* background:#3498db;
    border-color:#3498db; */
    background:#061055;
    border-color:#061055;
}
input:disabled ~ .c-checkboxGroup__checkmark{
    cursor:default;
}
    input:checked ~ .c-checkboxGroup__checkmark:after{
        border-color:white;
    }

input:checked ~ .c-checkboxGroup__radiomark{
    /* background-image:url("/resources/images/icons/ico_radio_on.svg"); */
}
input:checked ~ .c-checkboxGroup__radiomark:after{
    display:block;
    content:"";
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    width:9px; height:9px;
    background:#3e82c3;
    border-radius:200%;
}

@media all and (max-width:1279px){
    .mobile .c-checkboxGroup label{padding-left:22px}
    .mobile .c-checkboxGroup__checkmark, .c-checkboxGroup__radiomark{width:16px; height:16px}
    .mobile .c-checkboxGroup__checkmark:after{width:3px; height:6px}
}

.c-disB{display:block}
.c-disI{display:inline}
.c-disIb{display:inline-block}
.c-disN{display:none}
.layout-xsmall {display:none}
.c-commonGrid{padding:0 30px; max-width:1280px; margin:0 auto}

/* layout midium :  1280이상 only wide*/
@media all and (min-width:1280px){
    .layout-medium-under {display:none !important}
    .layout-medium {display:none !important}
    .layout-small {display:none !important}
}

/* layout midium :  1280이하 pc, 태블릿  only 태블릿 */
@media all and (min-width:1024px) and (max-width:1279px)  {
    .layout-large {display:none !important}
    .layout-small {display:none !important}
    .layout-mobile {display:block !important}
}

/* 1280이하 */
@media all and (max-width:1279px){
    .mobile .c-commonGrid{padding:0 20px; max-width:none}
    .mobile .c-commonGrid.c-commonGrid-full{padding:0}
    .c-disB-t{display:block}
    .c-disI-t{display:inline}
    .c-disIb-t{display:inline-block}
    .c-disF-t{display:flex}
    .c-disN-t{display:none}
    
    .layout-large {display:none !important}
    .layout-medium {display:none !important}
    .layout-mobile {display:block !important}
}

/* layout small :  1024이하 pc, 태블릿 , 모바일 */
@media all and (max-width:1023px){
    .c-disB-m{display:block}
    .c-disI-m{display:inline}
    .c-disIb-m{display:inline-block}
    .c-disN-m{display:none}
    .c-disT-m{display:table}

    .layout-large {display:none !important}
    .layout-medium {display:none !important}
    .layout-small {display:block !important}
    .layout-medium-upper {display:none !important}
}

@media all and (max-width:785px){
    .mobile .c-commonGrid{padding:0 15px}
}