@charset "utf-8";

/* *******************************************************
 * filename : default.css
 * description : 기본 CSS
 * date : 2022-07
******************************************************** */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {margin:0; padding:0; font-family:'Montserrat', "Noto Sans KR",-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:18px; color:#333;-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{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:#333;}
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:'Montserrat', "Noto Sans KR",-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;}

/* width */
.wd-10 {width: 10%;}
.wd-15 {width: 15%;}
.wd-20 {width: 20%;}
.wd-35 {width: 35%;}
.wd-40 {width: 40%;}
.wd-50 {width: 50%;}

/* text-align */
.align-c {text-align: center;}
.align-l {text-align: left;}
.align-r {text-align: right;}

/* 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%; }


/* 애니메이션 */

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

@keyframes fadeUp {
    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;
    }
    100% {
        opacity : 1;
    }
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

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