@charset "utf-8";

/* *******************************************************
 * filename : default.css
 * description : 기본 CSS
 * date : 2024
******************************************************** */
 @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/Pretendard-Thin.woff) format('woff');
  }
 @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/Pretendard-Light.woff) format('woff');
  }
@font-face {
   font-family: 'Pretendard';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/Pretendard-Regular.woff) format('woff');
 }
 @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/Pretendard-Medium.woff) format('woff');
  }
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/Pretendard-Bold.woff) format('woff');
  }
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/Pretendard-Black.woff) format('woff');
  }


* {margin:0; padding:0; font-family:'Pretendard',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; box-sizing:border-box; line-height: 1.5em;}
html,body{width:100%;height:100%;margin:0;padding:0;font-size:0.98rem; color:#000000;-webkit-text-size-adjust: 100% ; font-weight: 400;}
html,body,div,p,ul,li,ol,dl,dt,dd,input,textarea,select,p,hr,h1,h2,h3,h4,h5,h6,h7{margin:0;padding:0;letter-spacing: -0.02em;word-break: keep-all;}
ul,li,ol,dl,dd,dt{list-style:none;}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a,a:hover,a:active,a:focus {text-decoration:none;color:#000000;}
a, a::after, a::before {}
legend, fieldset label {width:1px;height:1px;overflow:hidden;}
caption {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
table{margin:0px;border-collapse:collapse;-ms-word-break: keep-all;word-break: keep-all;}
/* td,th,p,span {letter-spacing: -0.05em;}-ms-word-break: keep-all;word-break: keep-all;*/
.hidden{position: absolute; left:-9999px;}
.overflow{overflow:hidden}
.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
input, select, textarea {outline: none; font-size: 18px; font-family:'Pretendard',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;}
input[type="text"], select, textarea, button {
   -webkit-appearance: none;
   -webkit-border-radius: 0;
}
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    transition: all 0.2s;
    }
select::-ms-expand { display:none;}
select:focus {border: 1px solid #222;}
strong {font-weight: 600;}

/* width */
.wd-05 {width: 5%;}
.wd-10 {width: 10%;}
.wd-15 {width: 15%;}
.wd-20 {width: 20%;}
.wd-25 {width: 25%;}
.wd-30 {width: 30%;}
.wd-40 {width: 40%;}
.wd-50 {width: 50%;}
.wd-60 {width: 60%;}
.wd-70 {width: 70%;}
.wd-80 {width: 80%;}
.wd-90 {width: 90%;}
.wd-100 {width: 100%;}

.wd-200 {width: 200px;}
.wd-300 {width: 300px;}
.wd-400 {width: 400px;}
.wd-500 {width: 500px;}

/* margin-top */
.mt-05 {margin-top: 5px !important;}
.mt-10 {margin-top: 10px !important;}
.mt-15 {margin-top: 15px !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;}

/* margin-bottom */
.mb-10 {margin-bottom: 10px;}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}

/* margin-left */
.ml-05 {margin-left: 5px;}
.ml-10 {margin-left: 10px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-30 {margin-left: 30px;}

/* margin-right */
.mr-05 {margin-right: 5px;}
.mr-10 {margin-right: 10px;}
.mr-15 {margin-right: 15px;}
.mr-20 {margin-right: 20px;}
.mr-30 {margin-right: 30px;}

/* font-weight */
.b {font-weight: 600;}
.font-w500 {font-weight: 500;}

/* font-size */
.font-s {font-size: 13px !important;}
.font-l {font-size: 18px !important;}

/* text-align */
.align-c {text-align: center !important;}
.align-l {text-align: left !important;}
.align-r {text-align: right !important;}
.align-m {vertical-align: middle;}
.align-t {vertical-align: top;}

/*  */
.vertical-t {vertical-align: top;}
.vertical-m {vertical-align: middle;}
.vertical-b {vertical-align: bottom;}

/*  */
.display-flex {display: flex;}
.align-items-c {align-items: center;}

/* font-color */
.red {color: #eb1840;}
.green {color: #00b16c;}
.blue {color: #012674;}
.white {color: #fff;}
.pink {color: #ea9a81;}
.orange {color: #ee5501;}
.yellow {color: #fbcd73;}
.black {color: #000;}
.underline {text-decoration: underline;}
.underline:hover {text-decoration: underline;}

/* Skip Navgation */
.cm-accessibility a { position:absolute; text-align:center; width:200px; padding:10px 0; display:block; background:#222; color:#fff; left:-9999px; font-size:16px ; font-weight:500;}
.cm-accessibility a:hover { z-index:999999; margin-left:-100px; left:50%; }
.cm-accessibility a:focus { z-index:999999; margin-left:-100px; left:50%; }
.cm-accessibility a:active { z-index:999999; margin-left:-100px; left:50%; }

/* icon-arrow */
.icon-arrow01 {display: block; width: 54px; height: 8px; position: relative; border-bottom: 1px solid #c4c4c4; transition: all 0.2s;}
.icon-arrow01::before {content: ''; display: block; width: 11px; height: 1px; border-top: 1px solid #c4c4c4; position: absolute; top: 2px; right: 0; transform: rotate(45deg); transition: all 0.2s;}
.icon-arrow01.blue {border-bottom: 1px solid #88cafe}
.icon-arrow01::before {border-top: 1px solid #88cafe;}

/* button */
.btn-wrap {display: flex; justify-content: center;}
.btn-wrap button.btn {margin: 15px;}
button.btn {cursor: pointer; margin: 0 auto; display: block; border: 0; font-size: 24px; font-weight: 600; text-align: center; color: #fff; text-transform: uppercase; padding: 20px 67px; transition: all 0.2s;}
button.btn.orange {border: 1px solid #ff9800; background: #ff9800;}
button.btn.orange:hover {background: #fff; color: #ff9800;}
button.btn.white {border: 1px solid #ff9800; background: #fff; color: #ff9800;}
button.btn.white:hover {background: #ff9800; color: #fff;}
.btn-wrap a.btn {display: inline-block; font-size: 14px; border-radius: 50px; border: 1px solid #333; padding: 5px 15px; background-color:#fff; transition: all 0.2s;}
.btn-wrap a.btn.download {padding-right: 45px; background-image: url('../images/ico-download.png'); background-repeat: no-repeat; background-position: right 15px center;}
.btn-wrap a.btn.download:hover {background-image: url('../images/ico-download-w.png'); background-color: #e51837; border: 1px solid #e51837; color:#fff;}

/*  */
.mt-10 {margin-top: 10px;}

@media all and (max-width:768px) {
    .btn-wrap {display: block;}
    .btn-wrap button.btn {margin: 3px auto; width: 100%;}
    button.btn {font-size: 14px;}
    .font-s {font-size: 10px !important;}
}

/* 애니메이션 */

@keyframes bgScale {
    0% {
        opacity: 0;
        transform: scale(1.2);
        transition-timing-function: ease;
    }
    100% {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes updown {
    0%{
        top: -20vh;
        /* transform: translate3d(0,100px,0); */
    }
    100% {
        top: 0;
        /* transform: translateZ(0); */
    }
}

@keyframes fadeUp {
    0%{
        opacity: 0;
        transform: translate3d(0,100px,0);
    }
    100% {
        opacity : 1;
        transform: translateZ(0);
    }
}

@keyframes fadeDown {
    0%{
        opacity: 0;
        transform: translate3d(0,-100px,0);
    }
    100% {
        opacity : 1;
        transform: translateZ(0);
    }
}

@keyframes fadeLeft {
    0%{
        opacity: 0;
        transform: translate3d(100px,0,0);
    }
    100% {
        opacity : 1;
        transform: translateZ(0)
    }
}
@keyframes fadeRight {
    0%{
        opacity: 0;
        transform: translate3d(-100px,0,0)
    }
    100% {
        opacity : 1;
        transform: translateZ(0)
    }
}

@keyframes fade {
    0%{
        opacity: 0;
    }
    50% {
        opacity : 1;
    }
    100% {
        opacity : 1;
    }
}

@keyframes fadein {
    0%{
        opacity: 0;
    }
    25% {
        opacity : 0;
    }
    50% {
        opacity : 1;
    }
    100% {
        opacity : 1;
    }
}
@keyframes fadeout {
    0%{
        opacity: 1;
    }
    25% {
        opacity : 1;
    }
    50% {
        opacity : 0;
    }
    100% {
        opacity : 0;
    }
}